对CSS预处理器的一些看法

使用场景:实现首页一个动态输入文字的效果,原理上是用animate-delay属性去控制每个字母出现的时间,从而达到效果。我还想实现的一个增强性效果是每输一个单词,有节奏地停顿下。

思考:很明显,有n个文字,我就得写n个animate-delay值去控制它的显示时间,当然,用css去写,傻乎乎地写40来个.class 样式实现是完全没问题的,由于keystonejs项目本身用的就是less,这时候我觉得less应该用得上了。

查了下用less 的loop 去做,果然,十来行代码就搞定了原本可能要百来行代码写的东西,挺爽。

//less loop 实现一个单词 一个单词打,而且之间停顿时间间隔不一样
.spanfor(@i) when (@i > 0) and (@i <= 9){
  .animated-input span:nth-of-type(@{i}){
   animation-delay:1s + (.1*@i);
  }
  .spanfor((@i - 1));
}
.spanfor(26);

然后那个增强性的体验改起来也挺方便,就像如上 0-9 是第一个字母,animation-delay是1s开始加 ,那第2,3个字母 可以是1.3秒,1.6秒 开始加,这就实现了几个单词之间的顿挫感,用less改起来很方便,但想象下,如果我用的是原生的css去写,每个单词我都要去改每个字母的参数,这维护起来的确会是场灾难。

*总结:如果使用场景中你要用到 循环迭代地定义许多相似的样式,定义全局变量,或者动态的进行值运算,用less这类框架会为你省很多时间,而且代码维护起来也非常方便*