Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)
LESS是基于JavaScript,所以,是在客户端处理的。
另一方面,Sass是基于Ruby的,然后是在服务器端处理的。
Less和Sass的相同之处:
1.变量:可以单独定义一系列通用的样式,在需要的时候进行调用。
2.混合(Mixins):class中的class(讲一个class引入到另一个class,实现class与class之间的继承),还可以带参数的混合,就像函数一样。
3.嵌套:class中嵌套class,从而减少代码的重复。
4.运算:提供了加减乘除四则运算,可以做属性值可颜色的运算。
Less和Sass之间的区别:
1.实现方式:Less是基于JavaScript,是在客户端进行处理的;Sass是基于Ruby,是在服务器端进行处理的。
2.定义变量:Less定义变量时使用前缀:@;Sass定义变量时使用前缀:$。
3.混合(Mixins):Less中使用混合时,只需在classB中根据classA的命名来是用;Sass中首先在定义混合时需要使用@mixin命令,其次在调用时需要使用@include命令来引入之前定义的混合。
4.解析方式:Less可以向上/向下解析;Sass只能向上解析。
5.变量的作用域:Less中的变量有全局和局部之分;Sass可以变量可以理解为都是全局的,但可以通过在变量后面跟!default,在引入Sass文件之前改变变量的属性值来解决这一问题。
6.比起Less,Sass中增加了条件语句(if、if...else)和循环语句(for循环、while循环和each循环)还有自定义函数: