Sass知识

本文最后更新于 2025年7月30日 下午

参考：https://www.sass.hk/docs/ 。

简介

Sass 是一款强化 CSS 的辅助工具。它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

特色功能

  • 完全兼容 CSS3
  • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供控制指令 (control directives)等高级功能
  • 自定义输出格式

语法格式

  • Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名
  • 另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名
  • 任何一种格式可以直接导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式

使用 Sass

  • Sass 可以通过以下三种方式使用：作为命令行工具；作为独立的 Ruby 模块 (Ruby module)；或者作为 Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）。无论哪种方式都需要先安装 Sass gem （Windows 系统需要先安装 Ruby）

CSS 功能拓展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

/* ---编译为如下--- */

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

父选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。

注意，& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。当父选择器含有不合适的后缀时，Sass 将会报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a {
  font-weight: bold;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
  body.firefox & {
    /* 注意此用法 */
    font-weight: normal;
  }
}

/* ---编译为如下--- */

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

其中，命名空间也可以包含自己的属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

/* ---编译为如下--- */

.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold;
}

占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。

与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用，更多介绍请查阅 @extend-Only Selectors。

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

注释 /* */ 与 //

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释//，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。

将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。

此外，插值语句 (interpolation) 也可写进多行注释中输出变量值。

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
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black;
}

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a {
  color: green;
}

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

/* ---编译为如下--- */

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black;
}

a {
  color: green;
}

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

SassScript

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。

Interactive Shell

少用，暂无介绍，仅占坑。

变量 $

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样。

直接使用即调用变量。

1
2
3
4
5
6
7
8
9
10
11
$width: 5em;

#main {
  width: $width;
}

/* ---编译为如下--- */

#main {
  width: 5em;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。

将局部变量转换为全局变量可以添加 !global 声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

/* ---编译为如下--- */

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

还可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

注意，变量是 null 空值时将视为未被 !default 赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$cont: "First content";
$cont: "Second content?" !default;
$new_cont: "First time reference" !default;
$old_cont: null;
$old_cont: "Non-null content" !default;

#main {
  cont: $cont;
  new-cont: $new_cont;
  old_cont: $old_cont;
}

/* ---编译为如下--- */

#main {
  cont: "First content";
  new-cont: "First time reference";
  old_cont: "Non-null content";
}

数据类型

少用，暂无介绍，仅占坑。

运算

少用，暂无介绍，仅占坑。

圆括号

圆括号可以用来影响运算的顺序。

1
2
3
4
5
6
7
8
9
p {
  width: 1em + (2em * 3);
}

/* ---编译为如下--- */

p {
  width: 7em;
}

函数

少用，暂无介绍，仅占坑。

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量。

#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/* ---编译为如下--- */

p.foo {
  border-color: blue;
}

p {
  font: 12px/30px;
}

& in SassScript

少用，暂无介绍，仅占坑。

@-Rules 与指令

Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）。

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中。另外，被导入的文件中所包含的变量和混合指令 (mixin) 都可以在导入的文件中使用。

Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

  • 文件拓展名是 .css
  • 文件名以 http:// 开头
  • 文件名是 url()
  • @import 包含 media queries

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

1
2
3
4
5
6
7
@import "index.scss";
@import "foo";

/* ---编译为如下--- */

@import "index.scss";
@import "foo.scss";

Sass 允许同时导入多个文件。同时，导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式。

1
2
3
4
5
6
7
8
9
@import "rounded-corners", "text-shadow";

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

/* ---编译为如下--- */
@import "rounded-corners";
@import "text-shadow";
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

分音

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，并像如下导入。导入的是 _colors.scss 文件，但不会将其编译成 _colours.css 文件。

1
@import "colors";

但是注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

嵌套

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* example.scss 文件 */
.example {
  color: red;
}
/* 另一个非 example.scss 文件 */
#main {
  @import "example";
}

/* ---编译为如下--- */

/* 另一个非 example.scss 文件 */
#main .example {
  color: red;
}

但是，不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。

如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

/* ---编译为如下--- */

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

/* ---编译为如下--- */

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

/* ---编译为如下--- */

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}

@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。比如，要设计一个普通错误样式与一个严重错误样式，一般会写：

1
2
3
4
5
6
7
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

麻烦的是，这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式，带来了很多不变：智能比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。

1
2
3
4
5
6
7
8
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

How it Works

@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError）：

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
.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error.intrusion {
  background-image: url("/image/hacked.png");
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

/* ---编译为如下--- */

.error,
.seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.error.intrusion,
.seriousError.intrusion {
  background-image: url("/image/hacked.png");
}

.seriousError {
  border-width: 3px;
}

延伸复杂的选择器

class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href^="http://"] 等。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

/* ---编译为如下--- */

a:hover,
.hoverlink {
  text-decoration: underline;
}

跟上面 .error.intrusion 一样，所有 a:hover 的样式将继承给 .hoverlink，包括其他使用到 a:hover 的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

/* ---编译为如下--- */

.comment a.user:hover,
.comment .user.hoverlink {
  font-weight: bold;
}

多重延伸

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器。

多重延伸可以使用逗号分隔选择器名，如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果。

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
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

/* ---编译为如下--- */

.error,
.seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.attention,
.seriousError {
  font-size: 3em;
  background-color: #ff0;
}

.seriousError {
  border-width: 3px;
}

继续延伸

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个。

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
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

/* ---编译为如下--- */

.error,
.seriousError,
.criticalError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError,
.criticalError {
  border-width: 3px;
}
.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

选择器列

暂时不可以将选择器列，比如 .foo .bar 或 .foo + .bar 延伸给其他元素，但是，却可以将其他元素延伸给选择器列：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

/* ---编译为如下--- */

a,
#fake-links .link {
  color: blue;
}

a:hover,
#fake-links .link:hover {
  text-decoration: underline;
}

@extend-Only

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。

如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” ，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。

占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

/* ---编译为如下--- */

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

!optional

如果 @extend 失败会收到错误提示，比如，这样写 a.important { @extend .notice }，当没有 .notice 选择器时，将会报错，只有 h1.notice 包含 .notice 时也会报错，因为 h1 与 a 冲突，会生成新的选择器。

如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的。

1
2
3
a.important {
  @extend .notice !optional;
}

在指令中延伸

在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。

也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。

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
/* ---如下可行--- */

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error; /* 可行 */
    border-width: 3px;
  }
}

/* ---如下不可行--- */

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    @extend .error; /* 不可行 */
    border-width: 3px;
  }
}

@at-root

少用，暂无介绍，仅占坑。

@debug

少用，暂无介绍，仅占坑。

@warn

少用，暂无介绍，仅占坑。

@error

少用，暂无介绍，仅占坑。

控制指令

少用，暂无介绍，仅占坑。

混合指令

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。

混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

定义

混合指令的用法是在 @mixin 后添加名称与样式。

混合也需要包含选择器和属性，甚至可以用 & 引用父选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & {
    height: 1px;
  }
}

引用

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）。

也可以在最外层引用混合样式，这样不会直接定义属性，也不可以使用父选择器。

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
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

/* ---编译为如下--- */

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

a {
  color: blue;
  background-color: red;
}

混合样式中也可以包含其他混合样式。所以，混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。

1
2
3
4
5
6
7
8
9
10
@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background {
  background-color: #fc0;
}
@mixin header-text {
  font-size: 20px;
}

参数

参数用于给混合指令中的样式设定变量，并且赋值使用。

在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue, 1in);
}

/* ---编译为如下--- */

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值。

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
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}

/* ---编译为如下--- */

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

关键词参数

混合指令也可以使用关键词参数，上面的例子也可以写成：

1
2
3
4
5
6
p {
  @include sexy-border($color: blue);
}
h1 {
  @include sexy-border($color: blue, $width: 2in);
}

虽然不够简明，但是阅读起来会更方便。

关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

参数变量

有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 ‘shadow’ 会被用到。

这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

/* ---编译为如下--- */

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

参数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;

.primary {
  @include colors($values...);
}

/* ---编译为如下--- */

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

也可以使用变量参数来包装混合器，并在不改变混合器的参数的情况下添加额外的样式。如果这样做，即使是关键字参数也会被传递到被包裹的混合器中。

下面的 $width 参数将会传递给 stylish-mixin 作为关键词。

1
2
3
4
5
6
7
8
@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

向混合样式导入内容

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方。

注意： 当 @content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

此外，为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示。

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
@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

/* ---编译为如下--- */

* html #logo {
  background-image: url(/logo.gif);
}

/* ---最上面的可以写成如下--- */

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

传递给 @mixin 的内容块在定义该块的范围内被评估，而不是在 @mixin 的范围内。这意味着 @mixin 的本地变量不能在传递的样式块中使用，变量将解析为全局值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors {
    color: $color;
  }
}

/* ---编译为如下--- */

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

此外这也清楚地表明，在传递的块中使用的变量和混合元素与定义块的周围的其他样式有关。

1
2
3
4
5
6
7
#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

函数指令

少用，暂无介绍，仅占坑。

输出格式

少用，暂无介绍，仅占坑。

扩展 Sass

少用，暂无介绍，仅占坑。

编程语言 > CSS
#CSS #知识技巧
Sass知识
https://xuekeven.github.io/2022/12/07/Sass知识/
作者
Keven
发布于
2022年12月7日
更新于
2025年7月30日
许可协议