共计 4398 个字符，预计需要花费 11 分钟才能阅读完成。
前言
说到 css，相信大家都知道，css 样式是用来修饰网页页面结构的。对于一名前端来说写好 css 并不难，但如何写出优雅可复用、易重构的 css 代码并不容易。
于是 css 预处理器便出现在大家的视线里，分别是 stylus、less、sass。它们的出现让编写 css 更加像 JavaScript 一样具有严谨性、编程性。
由于我工作中常用 Scss(Sass3.0 版本后更偏向 css 的原生语法)，那就大展身手介绍一下 Sass 的用法，让更多小伙伴变得跟我一样快（just a kiding ????）。
在此对 Stylus、Less 就不做多叙述了，如果小伙伴对其他两种感兴趣，可以访问 Stylus 官网、Less 官网了解更多哦。
Sass 背景
Sass（Syntactically Awesome Style Sheets），套用 sass 官网的牛逼介绍：“Sass 是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！”。是一个相对新的 css 预编译框架，为前端开发而生。
为什么使用 Sass?
通过 Sass 编写 css 代码，你可以减少冗余的 css 代码，编写更加语义化的 css，它扩展了 css 的能力，增加变量、嵌套 css 规则、混合器、继承、函数等新特性。
Write less，Do more。何乐而不为呢？????
.sass vs .scss ?
早已 Sass 出现的时候，是没有 Scss 的，Sass 语法跟原生 css 不尽相同。使用缩进代替括号，没有分号。有些开发者并不适应这种写法，于是在 Sass 发布的 3.0 版本后官方提出修改，将文件后缀名以.sass 改成了.scss, 语法也更贴切原生 css，让开发者可以像原来写 css 一样愉快的写 scss。scss 对应 css 就像 typescript 是 JavaScript 的超集一样的关系。
Sass 安装
关于 Sass 安装网上有很多详细教程，推荐几篇典型的安装教程文章。Sass 官网安装教程 慕课网 Sass 安装
Sass 在 node.js 编译环境的安装
在 nodejs 的平台下面，我们需要安装 node-sass 模块，通过这个模块，我们可以将 scss 文件转换成 css 文件
$ cnpm install node-sass –save
安装完成以后，我们新建一个文件，名为 index.scss 文件
使用 node-sass 的语法来编译 index.scss, 具体语法如下
node-sass –watch src/index.scss dist/index.css
如果我们需要监控一个文件夹下面所有的文件，则需要使用如下的语法格式
node-sass -w -r < 源文件夹 > -o < 目标文件夹 > // 它只会跟踪同名文件，没有则新建
-w, –watch Watch a directory or file // 监听
-r, –recursive Recursively watch directories or files // 递归地查看目录或文件
-o, –output Output directory // 输出目录
为了能够方法的执行我们的 node-sass 语法，我们一般会把编译命令写在 package.json 的配置文件下面，如下：
{
“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 属性声明很像：
$theme-color: #fff;
这意味着变量 $theme-color 现在的值是 #fff。
$theme-color: #fff;
div {
$height: 100px;
height: $height;
color: $theme-color;
}
// 编译后
div {
height: 100px;
color: #fff;
}
在这段代码中，$theme-color 这个变量定义在规则块外边，所以在这个样式表中都可以像 div 规则块那样引用它。
1.2 默认变量
$defaultWidth: 100px; // 全局变量
$defaultWidth: 200px !default;
.div1 {
$height: 50px; // 定义变量 局部变量
width: $defaultWidth;
height: $height; // 引用变量
}
.div2 {
width: $defaultWidth;
}
注意：在 Scss 语法里面，变量分为全局变量与局部变量，变量加上!default 以后就是默认变量
2、嵌套 CSS 规则
css 中重复写选择器是非常繁琐无趣的事。如果要写一大串指向页面中同一块样式时，往往需要多次写同一个 id 或是同一个 class 类名:
#content article h1 {
color: #333;
}
#content article p {
margin-bottom: 1.4em;
}
#content aside {
background-color: #eee;
}
上面的 css 代码使用 scss 语法编写后就会变得简单明了、结构清晰，如下所示
#content {
article {
h1 {
color: #333;
}
p {
margin-bottom: 1.4em;
}
}
aside {
background-color: #eee;
}
}
2.1 父选择器的标识符 &
在 scss 中，有时候我们需要在子级当中使用父级选择器，此时我们就需要使用 & 来选取父级选择器
.div1 {
width: 100px;
height: 100px;
}
.div1 img {
width: 100%;
height: auto;
}
.div1:hover {
border: 1px solid black;
}
上面的 css 代码经过 scss 换写后，可以简写为如下
.div1 {
width: 100px;
height: 100px;
img {
width: 100%;
height: auto;
}
&:hover {
border: 1px solid black;
}
}
2.2 子级选择器中的 > ~ 与 +
‘>’ 代表是的子级选择器
空格代码的是后代选择器
‘+’ 代表的是相邻兄弟选择器
‘～’代表兄弟选择器
以上的四种用法与 CSS 的选择器保持一致
3、混合器
有时候我们在写样式的时候会发现，有些地方有样式，其中有一些是相同的，这个时候，我们会把这些样式提取出来，然后再单独导入进去。
例如：假设我们需要写一个 button，这个 button 的大小与边框都一样，唯独在颜色上一样的时候，我们可以使用混合器做如下处理
@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 当中，定义混合器也可以使用参数，代码如下所示：
@mixin flex-box($direction) {
display: flex;
flex-direction: $direction;
}
.item1 {
@include flex-box(row);
justify-content: center;
align-items: center;
}
上面的代码经过 node-sass 编译后，如下：
.item1 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
3.2 混合器参数的默认值
为了在 @include 混合器时不必传入所有的参数，给参数指定一个默认值，上面的 scss 中，如果希望 flex 布局中默认的主轴是 column，可以定义如下：
@mixin flex-box($direction: column) {
display: flex;
flex-direction: $direction;
}
.item1 {
@include flex-box;
justify-content: center;
align-items: center;
}
在上面的 SCSS 当中，我们在调用的时候没有传递参数给混合器，而是使用了它的默认值
4、选择器继承
使用 sass 的时候，最后一个减少重复的主要特性就是选择器继承。
选择器继承指的是一个选择器可以继承另一个选择器定义的所有样式。这个通过 @extend 语法实现，如下代码:
// 通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.loading-error {
@extend .error;
border-width: 3px;
}
上面的 @extend 就相当于继承，后面的.error 则是继承的选择器，上面的 scss 经过编译后所呈现的代码如下所示：
.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 层叠规则会决定应用哪个样式。
相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
写在最后
变量
嵌套 CSS 规则
混合器
继承
以上的四种是 Sass 的核心内容，也是最基础内容，通过了解学习后，我们可以快速的编写页面样式，提高开发效率，做到 CSS 代码重复率低，可复用性高。
下一篇我会带来关于 Sass 的高级用法，敬请期待！????