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";