SASS和LESS等优缺点对比，使用方法总结 (笔记大全)

sass优点:

用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；可编程能力比较强，支持函数，列表，对象，判断，循环等；相比less有更多的功能； Bootstrap/Foundation等使用scss；丰富的sass库：Compass/Bourbon；

sass缺点:

在公司内部安装node-sass会失败，需要使用cnpm或者手工安装

less优点

可以在浏览器中运行，实现主题定制功能；

less缺点

编程能力弱，不直接支持对象，循环，判断等； @variable 变量命名和css的@import/media/keyframes等含义容易混淆； mixin/extend的语法比较奇怪； mixin的参数如果遇到多参数和列表参数值的时候容易混淆；

SASS是CSS的预处理器，通俗点说就是一种样式语言，语法上兼容CSS，并加入CSS没有的一些特性。最终，SASS还是要编译为CSS才能运行

LESS

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。

变量（Variables）

1These are pretty self-explanatory:
2@nice-blue: #5B83AD;
3@light-blue: @nice-blue + #111;
4
5#header {
6  color: @light-blue;
7}

混合（Mixins）

1.bordered {
2  border-top: dotted 1px black;
3  border-bottom: solid 2px black;
4}
5
6#menu a {
7  color: #111;
8  .bordered;
9}
10
11.post a {
12  color: red;
13  .bordered;
14}

嵌套（Nesting）

1#header {
2  color: black;
3}
4#header .navigation {
5  font-size: 12px;
6}
7#header .logo {
8  width: 300px;
9}
10==》
11#header {
12  color: black;
13  .navigation {
14    font-size: 12px;
15  }
16  .logo {
17    width: 300px;
18  }
19}

运算（Operations）

1// example with variables
2@base: 5%;
3@filler: @base * 2; // result is 10%
4@other: @base + @filler; // result is 15%

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算

函数（Functions）

1@base: #f04615;
2@width: 0.5;
3
4.class {
5  width: percentage(@width); // returns `50%`
6  color: saturate(@base, 5%);
7  background-color: spin(lighten(@base, 25%), 8);
8}

Less 内置大量函数（image-size("file.png")，image-width("file.png")等等，用的时候查AI）。 if 函数 @some: foo;

1div {
2    margin: if((2 > 1), 0, 3px);
3    color:  if((iscolor(@some)), darken(@some, 10%), black);
4}

作用域（Scope）

1@var: red;
2
3#page {
4  @var: white;
5  #header {
6    color: @var; // white
7  }
8}

导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

1@import "library"; // library.less
2@import "typo.css";