前端架构师技术之Sass

1 CSS 缺点

CSS 仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，也不可以引用。CSS 主要有以下缺点。

• CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
• CSS 需要书写大量看似没有逻辑的代码，代码冗余度是比较高的。
• CSS 没有很好的计算能力。
• 不方便维护及扩展，不利于复用。

2 什么是 Sass

为了解决 CSS 在实际开发过程中存在的问题，我们可以使用 Sass（CSS预处理器） 来实现页面的样式。

• Sass 是一款成熟、稳定、强大的专业级 CSS 扩展语言。
• 它是一款强化 CSS 的辅助工具。
• 在 CSS 语法的基础上增加了变量（variables）、嵌套（nestedrules）、混合（mixins）、导入（inline imports）等高级功能，让 CSS 更加强大与优雅。
• 使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
• Sass 完全兼容所有版本的 CSS。

总的来说就是：写更少的代码，实现更多的样式。

3 Sass 编译

• Sass在线编译工具 使用工具进行编译

• VScode 下载安装 Easy Sass 插件，进行自动编译

• VScode 下载安装 Live Sass Compilerv 插件，进行自动编译

// Live Sass 配置
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],
"liveSassCompile.settings.excludeList": [
    "**",
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        // "format": "expanded",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4 Sass 基本用法

4.1 Sass 语法格式

• 一种是最早的 Sass 语法格式，被称为缩进格式（Indented Sass），通常简称“Sass”，是一种简化格式。这种格式以“.sass”作为扩展名。（不再推荐使用）
• 另一种语法格式是SCSS（SassyCSS），这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。这种格式以“.scss”作为扩展名。（目前使用）

4.2 Sass 变量

Sass 使用“$”符号来标识变量，如 $highlight-color 和 $sidebar-width。

Sass 变量的声明和 CSS 属性的声明比较相似。

$color: #F90;
1

任何可以用作 CSS 属性值的赋值都可以用作 Sass 的变量值，甚至是以空格或逗号分割多个属性值。

$basic-border: 1px solid black;
$plain-font: "Myriad Pro", "Myriad", "Helvetica", "Neue", "Helvetica";
1
2

在变量定义完成之后，这时变量还没有生效，除非引用这个变量。

凡是 CSS 属性的标准值（如 1px 或者 bold）可存在的地方，变量就可以使用。

CSS生成时，变量会被它们的值所替代。之后，如果需要一个不同的值，只需要改变这个变量的值，那么所有引用此变量的地方生成的值都会随之改变。

$color: #F90;
.selected {
  border: 1px solid $color;
}
1
2
3
4

特殊变量：如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中。

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}
1
2
3
4

4.3 Sass 运算

Sass 支持数字的加（+）、减（-）、乘（*）、除（/）和取余（%）等运算，如果必要时会在不同单位间进行值的转换，例如，将 1in + 8pt 转换为 1.111in（pt 全称为 point，是一个自然界的长度单位，1in=72pt。根据此公式 1in+8pt 转换后的结果为 1.111in）。

// 编译前
p {
    width: 1in + 8pt;
}
// 编译后
p {
    width: 1.111in; 
}
1
2
3
4
5
6
7
8

“/”符号在 CSS 中通常起到分隔数字的用途，而在 Sass 中同时也赋予了“/”除法运算的功能，但两者并不会冲突。

也就是说，如果“/”在 Sass 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

// 编译前
p {
    font: 10px/8px;
    $width: 1000px;
    width: $width/2;
    height: (500px/2); 
    margin-left: 5px + 8px/2px; 
}
// 编译后
p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

编译使用了 “/” 运算符号的代码，font 编译后的结果不变，这是因为没有被圆括号包裹。

如果需要使用变量，同时又要确保 “/” 符号不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}
1
2
3
4
5

• 正常值用 “/” 运算，需要用圆括号包裹
• 变量值不用 “/” 运算，需要用 #{} 插值语句将变量包裹

4.4 Sass 嵌套

Sass 基于变量提供了更为强大的工具，即规则嵌套。

只有当 Sass 变量与规则嵌套一起使用时，才能发挥其更大的作用。

在使用 CSS 编写代码时，我们知道重复写选择器是非常烦琐的。

例如，要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个 ID 或 类名 来实现。

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #eee }

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

Sass 在编译输出 CSS 时会自动把这些嵌套规则处理好，避免代码的重复书写，且使样式的可读性更高。Sass 可以只写一遍来实现。

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

属性也可以嵌套，比如 border-color 属性，可以写成

// 编译前
.box {
    border: {
        color: red;
    }
}
// 编译后
.box {
    border-color: red;
}
1
2
3
4
5
6
7
8
9
10

注意：嵌套属性（border）后面必须加上冒号。

在嵌套的代码块内，可以使用 & 引用父元素。比如 :hover 伪类，可以写成

// 编译前
.box {
    &:hover { color: red; }
}
// 编译后
.box:hover {
    color: red;
}
1
2
3
4
5
6
7
8

4.4 Sass 注释

Sass 有两种注释风格

• 单行注释 // 注释 只保留在 Sass 源文件中，不会保留在编译后的文件中。
• 标准 CSS 注释 /* 注释 */， 会保留到编译后的文件中，压缩则删除。
  • 在标准注释后面加入一个感叹号，/*! 重要注释 */ 表示重要注释，压缩模式也会保留注释，用于版权声明等。

5 代码的重用

5.1 Sass 继承

Sass 中，继承可以让一个选择器继承另一个选择器的所有样式，继承使用 @extend 命令。

// 编译前
.alert{
    padding: 15px;
}

.alert a{
    text-decoration: none;
}

.alert-info{
    @extend .alert;
    background-color: lightblue;
}
// 编译后
.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  text-decoration: none;
}

.alert-info {
  background-color: lightblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

使用占位符选择器 %，从 Sass 3.2.0 后，就可以定义占位选择器 %，这个的优势在于，不调用不会有多余的 CSS 文件。

// 编译前
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// 编译后
div {
    font-size:20px;
    color:red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

5.2 混合(Mixin)

Mixin 是可以重用的代码块。

• 使用 @mixin 命令，定义一个代码块。
• 使用 @include 命令，调用这个mixin。

@mixin alert {
    color:#ccc;
    background-color:red;
}
div {
    @include alert;
}
1
2
3
4
5
6
7

Mxin 的强大之处，在于可以指定参数和缺省值，使用的时候，根据需要加入参数。

@mixin alert($color:red) {
    color:#ccc;
    background-color:$color;
}
div {
    @include alert(blue);
}
1
2
3
4
5
6
7

可以用 Mixin 来生成浏览器前缀。

// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
// 引入
@include keyframes(scale) {
    100% {
        transform: scale(0.8);
    }
}
// css编译后
@-webkit-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-moz-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-o-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

@mixin rounded($attr, $value) {
    #{$attr}: $value;
    -moz-#{$attr}: $value;
    -webkit-#{$attr}: $value;
}
#navbar li {
    @include rounded(border-radius, 8px);
}
1
2
3
4
5
6
7
8

5.3 颜色函数

Sass 提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
1
2
3
4

5.4 插入文件

使用 @import 命令引入外部文件， 引入后，可使用外部文件中的变量等。

@import "base.scss";
1

如果插入的是 .css 文件，则等同于 CSS 的 import 命令。

@import "base.css";
1

6 高级用法

6.1 条件语句

@if 可以用来判断，配套的还有 @else 命令

// Sass样式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css编译后样式
div {
    color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

**三目判断：**语法为 if($condition, $if_true, $if_false)

三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

$box: red;
$fontSize: if($box==red, 16px, 14px);
.box {
    font-size: $fontSize;
}
1
2
3
4
5
6
7
8

6.2 循环语句

for 循环，有两种形式，分别为：

• @for $var from through

• @for $var from to

$var 表示变量，start 表示开始值，end 表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

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

while 循环

$i: 6;
@while $i > 0 {
    .item-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}
1
2
3
4
5
6
7

each 命令，作用与 for 类似

• 语法为 @each $var in 。

• 其中 $var 表示变量

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

6.3 自定义函数

Sass 允许用户编写自己的函数，以 @function 开始，用 @return 返回值。

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

// 常用用法
$fontSize: 100px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(24px);
}
// css编译后样式
div {
    font-size: .24rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

7 练习作业

• 使用 Sass 语法优化移动端样式表