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";
复制代码

转载于:https://juejin.im/post/5c090b6af265da613d7bdf31