Sass 完整指南

Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码，节省开发时间。下面就来看看 Sass 中常用的功能吧！

1. 注释

在 Sass 中支持两种类型的注释：

1
2
3
// 注释一

/* 注释二 */

需要注意，当 Sass 编译成 CSS 时，第一种注释不会编译到 CSS 中（只在 Sass 文件中可见），第二种注释会编译到 CSS 中。

2. 嵌套

嵌套的写法是 Sass 的一大特点，通过嵌套这些代码，可以得到类似 HTML 结构的 CSS 代码，使代码更具可读性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav {
  background: #c39bd3;
  padding: 10px;
  height: 50px;

  ul {
    display: flex;
    list-style: none;
    justify-content: flex-end;

    li {
      color: white;
      margin-right: 10px;
    }
  }
}

那为什么要使用嵌套呢？在 CSS 中，如果想为其父元素的继承元素定义样式，就必须每次都选择父元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html,
body {
  height: 100%;
}

html #root,
body #root {
  height: 100%;
}

html .div-with-button,
body .div-with-button {
  background-color: black;
}

html .div-with-button button,
body .div-with-button button {
  background-color: #e4c681;
}

html .div-with-button button:hover,
body .div-with-button button:hover {
  background-color: #ffe082;
}

在 Sass 中就可以这样写，这样写就会使代码更加清晰、条理和简洁：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html,
body {
  height: 100%;

  #root {
    height: 100%;
  }

  .div-with-button {
    background-color: black;

    button {
      background-color: #e4c681;

      &:hover {
        background-color: #ffe082;
      }
    }
  }
}

注意，在编写 Sass 时，要嵌套嵌套太深，尽量不要超过三层，超过之后就会导致代码难以维护，并且在编译为 CSS 时就会出现不必要的选择器，就会导致 CSS 文件变大。

我们还可以在嵌套中使用 &，比如鼠标在按钮上悬浮时，改变颜色。在 CSS 中是这样的：

1
2
3
4
5
6
7
8
button {
  background-color: #535353;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}

在 Sass 中就可以这么写：

1
2
3
4
5
6
7
8
button {
  background-color: #535353;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}

通常，& 总是指向它上面的元素，可以用于伪类和伪元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  &:focus {
  }
  &:hover {
  }
  &:active {
  }
  &:first-child {
  }
  &:nth-child(2) {
  }
  &::after {
  }
  &::before {
  }
}

编译后的 CSS 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box:focus {
}
.box:hover {
}
.box:active {
}
.box:frist-child {
}
.box:nth-child(2) {
}
.box::after {
}
.box::before {
}

此外，如果类以相同的词开头（比如 box-yellow 和 box-red），就可以嵌套它们：

1
2
3
4
5
6
7
8
9
10
11
.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

编译成 CSS 就是这样的：

1
2
3
4
5
6
7
8
9
.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

Sass 还支持使用:来嵌套属性：

1
2
3
4
5
6
7
8
add-icon {
  background : {
    image: url('./assets/arrow-right-solid.svg');
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

上面的代码编译为如下 CSS：

1
2
3
4
5
6
.add-icon {
  background-image: url('./assets/arrow-right-solid.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

3. 变量

变量是用来储存数据的，在 Sass 中，我们可以将任何有效的 CSS 值保存在变量中。变量使用$符号定义：

1
2
3
4
5
6
7
8
9
10
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282a36;

$font-p: 13px;
$font-h1: 28px;

$base-font: 'Noto Sans KR', sans-serif;

变量的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
  background-color: $bg-color;
  font-size: $font-p;
  font-family: $base-font;
}

h1 {
  font-size: $font-h1;
  color: $black;
}

p {
  font-size: $font-p;
  color: $black;
}

a {
  color: $link-color;
}

当 Sass 编译成 CSS 时，所有的变量都会被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等。

需要注意，CSS 变量是有范围的，位于顶层的变量都是全局变量，在块中定义的变量都是局部变量。全局变量可以在任何地方使用，局部变量只能在变量定义的块中使用。

1
2
3
4
5
$my-global-variable: 'global';

div {
  $my-local-variables: 'local';
}

变量值是可以覆盖的：

1
2
3
4
5
6
7
8
9
$color: #fefefe;
.content {
  background-color: $color;
}

$color: #939393;
.footer {
  background-color: $color;
}

在上面的代码中，content 的背景颜色是#fefefe，而 footer 的背景颜色是#939393。要想改变全局变量，就需要添加!global 修饰符：

1
2
3
4
5
6
7
8
$color: #111;
.content {
  $color: #222;
  background-color: $color;
}
.footer {
  $color: #333 !global;
}

除此之外，Sass 变量是可以指定默认值的：

1
2
3
4
5
$message-color: blue !default;

.message {
  color: $message-color;
}

编译成的 CSS 代码如下：

1
2
3
p.message {
  color: blue;
}

我们可以在 @import 之前覆盖模块默认值：

1
2
3
4
5
6
$message-color: black;
@import 'my-module';

.message {
  color: $message-color;
}

编译成的 CSS 代码如下：

1
2
3
p.message {
  color: black;
}

也就是说，带有 !default 的变量只有在没有值的情况下才会生效。

4. Mixins 和 Include

mixin 是一组可以重用的 CSS 声明，语法类似于 JavaScript 中的函数，使用 @mixin 指令来代替 function 关键字。调用 mixin 是通过 @include 语句完成的。

以下是用 mixins 使元素水平垂直居中的方法：

1
2
3
4
5
6
7
8
9
10
@mixin absolute-center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.element {
  @include absolute-center();
}

当然，mixin 也是支持传递参数的：

1
2
3
4
5
6
7
8
@mixin square($size) {
  width: $size;
  height: $size;
}
div {
  @include square(60px);
  background-color: #000;
}

参数可以是可选的，可选参数的定义和 Sass 变量的定义形式是一样的：

1
2
3
4
@mixin square($width: 50px) {
  width: $size;
  height: $size;
}

我们还可以将 CSS 规则传递给 mixins。这些规则可以在使用 @content 的 mixin 中使用。

1
2
3
4
5
6
7
8
9
10
11
@mixin hover-not-disabled {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover-not-disabled {
    border-color: blue;
  }
}

这样 mixin 中的@content 在编译后就会变成 border-color: blue;这样写有助于减少&:not([disabled]):hover 部分的重复。

5. @import 和 @use

在 CSS 中我们通常会创建多个 CSS 文件并在需要时引入：

1
2
3
<link rel="stylesheet" href="/path/to/css/1"></link>
<link rel="stylesheet" href="/path/to/css/2"></link>
<link rel="stylesheet" href="/path/to/css/3"></link>

这样做会使浏览器发出多个 HTTP 请求，从而在一定程度上降低应用的速度。而 Sass 会在代码发动到浏览器之前进行代码组合，这样只需要请求一个 CSS 文件。

下面来看看如何使用 @import 将文件分块并导入到一个父文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  padding: 0;
  margin: 0;
}

body,
html {
  width: 100%;
  min-height: 100%;
}
@import 'normalize';

content {
  max-width: 660px;
}

假设 normalize.scss 和 styles.scss 都在同一个文件夹中，可以将一个导入另一个，如上所示。在使用@import 时，所有变量、mixin 等都可以全局访问，因为一切都是全局的，所以库必须为其所有成员添加前缀以避免命名冲突。因此不建议使用 @import。

可以使用 @use 来代替，它的基本用法与@import 相同：

1
2
3
4
5
@use 'normalize';

content {
  max-width: 660px;
}

使用 @use 导入的文件称为模块。要使用这些模块的 mixin 或变量，必须使用命名空间来调用它们。默认情况下，命名空间是文件名（不带扩展名）。

1
2
3
4
5
6
7
8
9
10
11
12
$accent-color: #535353;
@mixin dark-background {
  background-color: #000;
  color: #fff;
}
@use 'src/colors';
body {
  color: colors.$accent-color;
}
.dark-region {
  @include colors.dark-background;
}

还可以使用 as 来使用自定义命名空间：

1
2
3
4
@use 'src/colors' as c;
body {
  color: c.$accent-color;
}

当 _ 被添加到 SCSS 文件的文件名前时，解析器知道它是一个部分文件并且它仅用于导入。导入时，_ 部分是可选的。注意，这里使用 src/colors 来导入 src/_colors.scss。

6. 算术运算符

在 CSS 中可以使用 calc()进行数学计算，Sass 支持直接使用+、-、/、*、% 操作符对值和变量进行计算：

1
2
3
4
5
6
7
8
9
10
$content-width: 600px;
content {
  width: $content-width;
}
.inner-content {
  width: $content-width - 60px;
}
.outer-content {
  width: $content-width + 60px;
}

7. 流程控制

在 Sass 中有四种类型的流程控制规则：@if /@else、@each、@for 和@while。

其中 @if 和 @else 类似于 JavaScript 中的 if 和 else。

1
2
3
4
5
@mixin theme($is-dark: false) {
  @if $is-dark {
  } @else {
  }
}

@each 类似于 JavaScript 中的 for of：

1
2
3
4
5
6
7
8
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

注意：#{$size} 表示法用于使用变量制作动态属性名称和选择器，这称为插值。

@for 类似于 JavaScript 中的 for 循环：

1
2
3
4
5
@for $i from 1 through 4 {
  .bubble-#{$i} {
    transition-delay: 0.3 * $i;
  }
}

@while（不常用）类似于 JavaScript 中的 while 循环。

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
%flex {
  display: flex;
}

.some-class {
  height: 50%;
  background-color: black;
}

%flex_with_color {
  @extend %flex;
  @extend .some-class;
}

%button_styles {
  height: 50px;
  width: 200px;
}

div {
  @extend %flex_with_color;

  button {
    @extend %button_styles;
    color: #424242;
    background-color: #d966fb;
  }
}

上面的代码编译成 CSS 之后将是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
  display: flex;
}

.some-class,
div {
  height: 50%;
  background-color: black;
}

div button {
  height: 50px;
  width: 200px;
}

div button {
  color: #424242;
  background-color: #d966fb;
}

9. 媒体查询

在 Sass 中可以这样来使用媒体查询：

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  article {
    p {
      font-size: 100%;
      color: black;
      padding: 10px;

      @media (max-width: 768px) {
        font-size: 150%;
      }
    }
  }
}

编译成的 CSS 代码如下：

1
2
3
4
5
6
7
8
9
10
11
body article p {
  font-size: 100%;
  color: black;
  padding: 10px;
}

@media (max-width: 768px) {
  body article p {
    font-size: 150%;
  }
}

媒体查询是支持嵌套的，并将所有适用的查询与 and 运算符结合起来：

1
2
3
4
5
6
7
8
p {
  @media (max-width: 768px) {
    font-size: 150%;
    @media (orientation: landscape) {
      line-height: 75%;
    }
  }
}

编译成的 CSS 代码如下：

1
2
3
4
5
6
7
8
9
10
11
@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  p {
    line-height: 75%;
  }
}