https://juejin.im/post/5c090b6af265da613d7bdf31
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）
These are pretty self-explanatory:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
复制代码
混合（Mixins）
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
复制代码
嵌套（Nesting）
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
==》
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
复制代码
运算（Operations）
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
复制代码
为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算
函数（Functions）
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
复制代码
Less 内置大量函数（image-size("file.png")，image-width("file.png")等等，用的时候查AI）。 if 函数 @some: foo;
div {
margin: if((2 > 1), 0, 3px);
color: if((iscolor(@some)), darken(@some, 10%), black);
}
复制代码
作用域（Scope）
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
复制代码
导入（Importing）
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
