前言

说到css，相信大家都知道，css样式是用来修饰网页页面结构的。对于一名前端来说写好css并不难，但如何写出优雅可复用、易重构的css代码并不容易。

于是css预处理器便出现在大家的视线里，分别是 stylus、less、sass。它们的出现让编写css更加像JavaScript一样具有严谨性、编程性。

在此对Stylus、Less就不做多叙述了，如果小伙伴对其他两种感兴趣，可以访问 Stylus官网 、Less官网了解更多哦。

Sass背景

Sass（Syntactically Awesome Style Sheets），套用sass官网的牛逼介绍：“Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！”。是一个相对新的css预编译框架，为前端开发而生。

为什么使用Sass?

通过Sass编写css代码，你可以减少冗余的css代码，编写更加语义化的css，它扩展了css的能力，增加变量、嵌套css规则、混合器、继承、函数等新特性。

.sass vs .scss ?

早已Sass出现的时候，是没有Scss的，Sass语法跟原生css不尽相同。使用缩进代替括号，没有分号。有些开发者并不适应这种写法，于是在Sass发布的3.0版本后官方提出修改，将文件后缀名以.sass改成了.scss,语法也更贴切原生css，让开发者可以像原来写css一样愉快的写scss。scss对应css就像typescript是JavaScript的超集一样的关系。

Sass安装

关于Sass安装网上有很多详细教程，推荐几篇典型的安装教程文章。
Sass官网安装教程

Sass在node.js编译环境的安装

  1. 在 nodejs 的平台下面，我们需要安装node-sass模块，通过这个模块，我们可以将 scss 文件转换成css 文件

    1
    cnpm install node-sass --save

  2. 安装完成以后，我们新建一个文件，名为index.scss文件

  3. 使用node-sass的语法来编译index.scss,具体语法如下

    1
    node-sass --watch src/index.scss dist/index.css

  4. 如果我们需要监控一个文件夹下面所有的文件，则需要使用如下的语法格式

    1
    2
    3
    4
    node-sass  -w -r <源文件夹> -o <目标文件夹>    //它只会跟踪同名文件，没有则新建
    -w, --watch                Watch a directory or file //监听
    -r, --recursive            Recursively watch directories or files  //递归地查看目录或文件
    -o, --output               Output directory //输出目录

  5. 为了能够方法的执行我们的node-sass语法，我们一般会把编译命令写在 package.json的配置文件下面，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
      "name": "sass-demo",
      "version": "1.0.0",
      "description": "sass练习",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "sass": "node-sass --watch ./src/index.scss ./src/index.css"
      },
      "keywords": [],
      "author": "luckydong",
      "license": "ISC",
      "dependencies": {
        "node-sass": "^4.9.0"
      }
    }

1、 Sass变量

1.1 变量声明与引用

sass变量声明和css属性声明很像：

1
$theme-color: #fff;

这意味着变量$theme-color现在的值是#fff。

1
2
3
4
5
6
7
8
9
10
11
$theme-color: #fff;
div {
  $height: 100px;
  height: $height;
  color: $theme-color;
}
//编译后
div {
  height: 100px;
  color: #fff;
}

在这段代码中，$theme-color这个变量定义在规则块外边，所以在这个样式表中都可以像 div规则块那样引用它。

1.2 默认变量

1
2
3
4
5
6
7
8
9
10
$defaultWidth: 100px; //全局变量
$defaultWidth: 200px !default;
.div1 {
  $height: 50px; //定义变量  局部变量
  width: $defaultWidth;
  height: $height; //引用变量
}
.div2 {
  width: $defaultWidth;
}

注意：在Scss语法里面，变量分为全局变量与局部变量，变量加上!default 以后就是默认变量

2、 嵌套 CSS 规则

css中重复写选择器是非常繁琐无趣的事。如果要写一大串指向页面中同一块样式时，往往需要多次写同一个id或是同一个class类名:

1
2
3
4
5
6
7
8
9
#content article h1 {
  color: #333;
}
#content article p {
  margin-bottom: 1.4em;
}
#content aside {
  background-color: #eee;
}

上面的css代码使用scss语法编写后就会变得简单明了、结构清晰，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
#content {
  article {
    h1 {
      color: #333;
    }
    p {
      margin-bottom: 1.4em;
    }
  }
  aside {
    background-color: #eee;
  }
}

2.1 父选择器的标识符&

在 scss 中，有时候我们需要在子级当中使用父级选择器，此时我们就需要使用&来选取父级选择器

1
2
3
4
5
6
7
8
9
10
11
.div1 {
  width: 100px;
  height: 100px;
}
.div1 img {
  width: 100%;
  height: auto;
}
.div1:hover {
  border: 1px solid black;
}

上面的 css代码经过scss换写后，可以简写为如下

1
2
3
4
5
6
7
8
9
10
11
.div1 {
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: auto;
  }
  &:hover {
    border: 1px solid black;
  }
}

2.2 子级选择器中的> ~与+

  1. '>'代表是的子级选择器
  2. 空格代码的是后代选择器
  3. '+'代表的是相邻兄弟选择器
  4. ‘～’代表兄弟选择器

以上的四种用法与 CSS 的选择器保持一致

3、 混合器

有时候我们在写样式的时候会发现，有些地方有样式，其中有一些是相同的，这个时候，我们会把这些样式提取出来，然后再单独导入进去。

例如：假设我们需要写一个 button，这个 button 的大小与边框都一样，唯独在颜色上一样的时候，我们可以使用混合器做如下处理

1
2
3
4
5
6
7
8
9
10
@mixin btn {
  width: 120px;
  height: 35px;
  border: 1px solid lightgray;
  border-radius: 15px;
}
.btn-success {
  @include btn;
  background-color: green;
}

说明：在上面的代码当中，不难发现，我们使用了@mixin 来定义一个混合器。在下面的样式当中，我们使用了@include导入混合器，这样 .btn-success 的样式就结合了之前定义的样式了。

3.1 混合器的中参数

SCSS中的混合器有点类似于js中的方法，定义一个混合器就相当于定义了一个方法，而我们定义方法的时候可以定义参数，在调用方法的时候，我们则可以使用这个参数。同理，在 SCSS 当中，定义混合器也可以使用参数，代码如下所示：

1
2
3
4
5
6
7
8
9
@mixin flex-box($direction) {
  display: flex;
  flex-direction: $direction;
}
.item1 {
  @include flex-box(row);
  justify-content: center;
  align-items: center;
}

上面的代码经过 node-sass编译后，如下：

1
2
3
4
5
6
.item1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

3.2 混合器参数的默认值

为了在@include混合器时不必传入所有的参数，给参数指定一个默认值，上面的scss 中，如果希望flex布局中默认的主轴是 column，可以定义如下：

1
2
3
4
5
6
7
8
9
@mixin flex-box($direction: column) {
  display: flex;
  flex-direction: $direction;
}
.item1 {
  @include flex-box;
  justify-content: center;
  align-items: center;
}

在上面的 SCSS 当中，我们在调用的时候没有传递参数给混合器，而是使用了它的默认值

4、 选择器继承

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。

选择器继承指的是一个选择器可以继承另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:

1
2
3
4
5
6
7
8
9
//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.loading-error {
  @extend .error;
  border-width: 3px;
}

上面的@extend就相当于继承，后面的.error 则是继承的选择器，上面的 scss 经过编译后所呈现的代码如下所示：

1
2
3
4
5
6
7
8
9
.error,
.loading-error {
  border: 1px solid red;
  background-color: #fdd;
}

.loading-error {
  border-width: 3px;
}

说明：我们可以看到，继承的选择器，它在这里使用了分组选择器来完了这个功能，这样我们的.loading-error 的样式则单独的区分开。

关于@extend有两个要点你应该知道。

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。

继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。

相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

写在最后

  1. 变量
  2. 嵌套 CSS 规则
  3. 混合器
  4. 继承

以上的四种是 Sass 的核心内容，也是最基础内容，通过了解学习后，我们可以快速的编写页面样式，提高开发效率，做到 CSS 代码重复率低，可复用性高。