The difference between less and sass
1. Less and sass
1、Less：
是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
2、Sass：
是一种动态样式语言，Sass语法属于缩排语法，
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
2. The similarities between less and sass
Less and Sass have some syntax in common, such as the following:
1. Mixins—class within class;
2. Parameter mixing - classes that can pass parameters, just like functions;
3. Nesting rules - nest classes within Classes to reduce duplicate code;
4. Operations—Mathematics is used in CSS;
5. Color function - you can edit the color;
6. Namespace - groups styles so they can be called;
7. Scope - locally modify the style;
8. JavaScript assignment - Use JavaScript expressions to assign values in CSS.
3. The difference between less and sass
Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
1. The compilation environment is different
The installation of Sass requires a Ruby environment and is handled on the server side.
Less needs to introduce less.js to process the Less code and output css to the browser. You can also use Less in the development process, then compile it into a css file and put it directly into the project. There is also Less.app , SimpleLess, CodeKit.app and other tools also have online compilation addresses.
2. Variable symbols are different
SASS 变量符是 $
LESS 变量符是 @
3. The scope of variables is also different.
Less-作用域
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; /* 蓝色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 红色边框 */
}
#footer {
border: 1px solid $color; /* 蓝色边框 */
}
Sass-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
4. Different output settings
Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
nested: nested indented css code
expanded: expanded multi-line css code
compact: concise format css code
compressed: compressed css code
Less没有输出设置
5. Different support statements
Sass支持条件语句，可以使用if{
}else{
},for{
}循环等等。
/* Sample Sass “if” statement */
@if lightness($color) > 30% {
} @else {
}
/* Sample Sass “for” loop */
@for $i from 1 to 10 {
.border-#{
$i} {
border: #{
$i}px solid blue;
}
}
Less不支持。
6. Reference external CSS files
The names of external files referenced by Scss must start with _, as shown in the following example: h1 h2 h3 are set in the _test1.scss, _test2.scss, and _test3.scss files respectively. If the file name starts with an underscore _, Sass will think that the file is a reference file and will not compile it into a css file.
// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
h1 {
font-size: 17px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}
Less引用外部文件和css中的@import没什么差异。
7. Different tool libraries
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。
在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，
Bootstrap的样式文件部分源码就是采用Less语法编写。