查阅了许多相关css预处理器Less和Sass的资料,部分内容引用原作者。
自己总结了下。
共性有一下几点:
混合(Mixins):class中的class;
参数混合(Parametric):可以像函数一样传递参数的class;
嵌套规则(Nested Rules):class中嵌套class,从而减少重复的代码;
运算(Operations):css中的数学计算;
颜色功能(Color function):可以编辑你的颜色;
命名空间(Namespaces):样式分组,从而方便被调用;
作用域(Scope):局部修改样式;
JavaScript表达式(Javascript evaluation):在CSS样式中使用Javascript表达式赋值;
简单说下我的理解:
现在可以在用js的各种表达式写样式文件了,有函数,变量,引用引入,标签和属性的嵌套,继承,各类选择器,循环和if判断语句,;熟悉运用后可减少重复代码,大大提高效率。
将定义过的class A引入class B中,从而实现B继承A的属性;可以导入公共部分的代码,可设置全局变量。
class中嵌套class的写法,减少重复代码。主要作用是在开发阶段能有效的增强代码的可阅读性、可维护性。
数学运算可用于属性值和颜色值,利于我们处理稍复杂的运算。
颜色的函数运算,试我们变换颜色更方便。
命名空间,可将变量或混合模块封装,重复使用,提高利用率。
作用域,查找到符合的本地变量,没找到就向上查找。
主要区别是使用方式不同:
less是基于javascript的,在客户端处理;
需要注意的是,less输出修改过的CSS到浏览器需要依赖于Javascript引擎,而Javascript引擎需要额外的时间来处理;
这种情况可以只在开发阶段使用less,开发完成后,将less输出内容复制到单独的css文件用来代替less文件。
也可以使用less转义工具编译压缩你的代码,比如 LESS APP;
下载一个less.js脚本:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
注意rel后面是stylesheet/less,less.js放在less样式之后引入。
sass基于ruby,需要在服务端处理。
依赖于ruby环境。
编译上可能没有less那么直接,less更适合node。
具体的语法,在这里简单列几条
本人的第一篇博客,先尝试着发布一下。。。之后补上
更多教程了解:
sass教程:
http://www.w3cplus.com/sassguide/
less中文网
http://lesscss.cn/
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com
英文原文:http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
中文译文:http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html