Vue.js 学习总结（6）—— Css 之预处理器 Sass(Scss)、Less 的区别与选择

前言

Sass(Scss)、Less 都是 CSS 预处理器，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。

为什么使用 CSS 预处理器

原因

CSS 仅仅是一个标记语言，不可以自定义变量，不可以引用。

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器。

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

CSS 预处理器的好处

提供 CSS 层缺失的样式层复用机制

减少冗余代码

提高样式代码的可维护性

CSS 预处理器的缺点

开发工作流中多了一个环节，调试也变得更麻烦。

预编译很容易造成后代选择器的滥用

何时使用 CSS 预处理器

系统级框架开发或者比较大型复杂的样式设计时

持续维护集成时

复用型组件开发时

Sass/Scss 与 Less 对比

Sass/Scss

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是一种动态样式语言，Sass 语法属于缩排语法，比 CSS 多出变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数 等功能，更容易阅读。在开发最初版本之后，Weizenbaum 和 Chris Eppstein 继续通过 SassScript 来继续扩充 Sass 的功能。SassScript 是一个在 Sass 文件中使用的小型脚本语言。Sass 是一个将脚本解析成 CSS 的脚本语言，即 SassScript。 Sass 的缩排语法，对于写惯 CSS 前端的 Web 开发者来说很不直观，也不能将 CSS 代码加入到 Sass 里面，因此 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS) 。与原来的语法兼容，只是用 {} 取代了原来的缩进。所以 Sass 包括两套语法，通常情况下，这两套语法通过 .sass 和 .scss 两个文件扩展名区分开。

Less

Less 是 CSS 预处理器，也是一种动态样式语言，它为 CSS 增加了变量、嵌套、运算、混入(Mixin)、函数 等功能，让 CSS 更易维护、方便制作主题与扩充。Less 可以运行在 Node.js、浏览器(支持 IE6+、Webkit、Firefox)和 Rhino 平台上 ，网上有很多第三方工具帮助你编译 Less 源码。本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。Less 并没有丢掉 CSS 原有的语法与特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入动态语言的特性。

Less 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 Less 的部分特性，我们只需用很少的成本就可以换了很大的回报。一句话说就是 Less is more，借助 Less 可以更便捷的进行 Web 开发，Write more！

相同之处

都属于 CSS 预处理器

目的是使得 CSS 开发更灵活和更强大

扩展的 CSS 功能特性基本相同

不同之处

Sass 是在服务端处理的，以前是 Ruby ，现在是 Dart-Sass 或 Node-Sass，而 Less 是在客户端处理的，需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器，也可以在开发服务器将 Less 语法编译成 CSS 文件，输出 CSS 文件到生产包目录，有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。

变量符不一样，Less 是 @，而 Sass 是 $。

Sass 的功能比 Less 强大，基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器，为 CSS 加入动态语言的特性。

Less 相对 Sass 清晰明了，安装便捷，易于上手，对编译环境要求比较宽松，适合小型项目。Sass 更适用于复杂或大型项目。

输出设置，Less 没有输出设置，Sass 提供 4 种输出选项：nested/compact/compressed/expanded，输出样式的风格可以有 4 种选择，默认为 nested。

Sass 支持条件语句，可以使用 if...else.../for...while...each循环等，Less 不支持。

Sass 引用的外部文件命名必须以 _ 开头，Sass 会认为以 _ 文件是一个引用文件，不会将其编译为 CSS 文件。Less 引用外部文件和 CSS 中的 @import 没什么差异。

Less 中的变量运算可以带或不带单位，Sass 需要带单位。

Sass 有工具库 Compass，简单说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系，Compass 是 Sass 的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了 Sass 的功能。Less 有 UI 组件库 Bootstrap，Bootstrap 是 Web 前端开发中一个比较有名的前端 UI 组件库，Bootstrap 的样式文件部分源码就是采用 Less 语法编写。

选择与比较

|--------|---------------|-------------------------|
| 类别 | Sass/Scss | Less |
| 环境 | Dart/其他 | JavaScript |
| 使用 | 复杂 | 简单(相对而言) |
| 功能 | 复杂 | 简单(相对而言) |
| 处理 | 服务端 | 可以在 Node.js 或浏览器(客户端)运行 |
| 后缀 | .sass/.scss | .less |

目前大部分的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分使用环境，所以不用在意处理机制，以上只是单纯的对比两者本身。Sass/Scss 与 Less 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS，都具有变量、混入、嵌套、函数等特性，最终目的都是方便 CSS 的书写及维护。Less 和 Sass/Scss 互相促进互相影响，只是相比之下 Less 更接近 CSS 语法且更容易使用上手。因此对于我个人来说，在实际开发中更倾向于选择 Less。

Sass/Scss、Less 使用与语法

变量

css 复制代码

// Less
@width: 10px;
@height: @width + 10px;
@test: left;
#header {
  width: @width;
  height: @height;
  margin-@{test}: 5px;
}

/* ------------------------------ */

// Sass (老版本 Sass 使用 !，不是 $。)
$blue: #1875e7;　
div {
  color: $blue;
}

$side: left;
$my-radius: 5px;
.rounded {
  border-#{$side}-radius: $my-radius;
}

运算

css 复制代码

// Less
// 所有操作数被转换成相同的单位(乘法和除法不作转换)
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

@base: 2cm * 3mm; // 结果是 6cm

// 颜色运算
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

// 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

/* ------------------------------ */

// Sass
$var: 100px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

嵌套

css 复制代码

css// Less
#header {
  color: black;
  width: 600px;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  &-bottom {
    background-image: url("header-bottom.png");
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

/* ------------------------------ */

// Sass
。。。跟上面大同小异。。。

注释

css 复制代码

// Less
/* 一个块注释，源文件与编译后正常默认文件都保留。
 * style comment! 
 */
@var: red;

// 这一行被注释掉了，仅保留源文件中！
@var: white;

/* ------------------------------ */

// Sass
/* 一个块注释，源文件与编译后正常默认文件都保留。
 * style comment! 
 */
$var: red;

// 这一行被注释掉了，仅保留源文件中！
$var: white;

/*!
 重要注释！压缩模式也会保留
*/

混入(Mixin)

css 复制代码

// Less
// .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。
// 注意，你也可以使用 #ids 作为 mixin 使用。
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

/* ------------------------------ */

// Sass
@mixin bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  @include bordered;
}
.post a {
  color: red;
  @include bordered;
}

转义

css 复制代码

// Less
@min768: ~"(min-width: 768px)"; // 从 Less 3.5 开始，可以简写为：@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 编译后
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

函数

css 复制代码

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

// ui 给到的一般都是 px，可以使用此函数转换。
.rem(@name, @px) {
   @{name}: unit(@px / 100, rem);
}
.test(@a, @b) {
  @width: @a + @b;
}
@my-radius: 10px;
.border_radius(@v, @h, @radius: @my-radius){
  box-@{v}-@{h}-radius: @my-radius;
}
.good{
  .test(20px, 30px);
  .border_radius(top, left);
  .border_radius(bottom, right, 5px);
  width: @width; 
}

/* ------------------------------ */

// Sass
@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

优雅的动态获取元素数据

css 复制代码

// 除了以下方法可使用 less 的 plugin
// https://lesscss.org/features/#plugin-atrules-feature
// less 使用 js （未测试，纯百度到的栗子而已！）
.calcHeight() {
  // 3.5+ 可省略 ~
  @functions: ~`(function() { 
    this.calcHeight = function() {
      return document.body.clientHeight - document.getElementById('test').height;
    };
  })()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.calcHeight();
.test {
  width: `calcHeight()`;
}

// 或者巧妙使用 css 的 var() 函数或者 attr() 函数
// var() 函数必须要获取内联属性，即必须要是在 style 中的属性，且必须要加上 -- 前缀来标明这是一个自定义属性，否则浏览器无法解析。
// attr() 函数需要获取的标签中的属性，也可以是自定义属性, 但是必须要是在标签中的属性。
// <div self-property="attr-value" style="--test: 'var-value'"></div>
// attr(self-property) 或 var(--test)

// 所以我们就可以曲线救国，实现上面的需求。
// 先在 JS 代码中使用 [document.body.clientHeight - document.getElementById('test').height] 获取到数据，再填到页面中标签属性或 style 属性中。
// 在 CSS 中定义变量 $test: var(--参数名) 或 attr(参数名);
// 或 @test: var(--参数名) 或 attr(参数名);
// 最后直接使用
.test {
  width: @test; // Less
  width: $test; // Sass
  width: calc(100% - #{$test}); // Sass
}

继承

css 复制代码

// Less
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// OUTPUT
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}

// https://lesscss.org/features/#extend-feature

命名空间和访问符

css 复制代码

// Less (利用此特性也可变相实现继承)
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}
#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}
// 注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间后面（例如 #bundle().tab）。

映射

css 复制代码

// Less
#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
// OUTPUT
.button {
  color: blue;
  border: 1px solid green;
}

@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}
.navbar {
  display: block;
  @media (min-width: @sizes[tablet]) {
    display: inline-block;
  }
}

作用域

css 复制代码

// Less
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

导入

css 复制代码

// Less
@import "library"; // .less 可以省略后缀
@import "test.css";

Sass if-else

css 复制代码

$color: red;
p {
  color: $color;
  @if $color == red {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}

Sass for/while/each

css 复制代码

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

Sass 继承

css 复制代码

.class1 {
  border: 1px solid #ddd;
}

.class-sub {
  @extend .class1;
  font-size: 120%;
}