SASS - @extend（继承）指令

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – 语法
• SASS – 变量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

@extend指令可以让一个CSS类继承另一个CSS类。

当多个元素之间共享一组属性值，同时又有各自额外属性值时，这种方法很有用。

举例说明

以警告框为例，警告框有4种类型：

• info
• success
• error
• warning

所有类型的警告框样式相同，但颜色不同。每个类型的警告框使用@extend指令继承一组公共属性，然后各自设置颜色值。

示例：

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend .alert;
  background-color: dodgerblue;
}

.success {
  @extend .alert;
  background-color: green;
}

.error {
  @extend .alert;
  background-color: red;
}

.warning {
  @extend .alert;
  background-color: orange;
}
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

经过编译会输出以下css内容:

.alert, .info, .success, .error, .warning {
  padding: 10px;
  background-color: silver;
  color: white; }

.info {
  background-color: dodgerblue; }

.success {
  background-color: green; }

.error {
  background-color: red; }

.warning {
  background-color: orange; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

多个@extend

可以在选择器中使用多个@extend指令。

示例：

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.important {
  font-weight: bold;
  font-size: larger;
}

.important-error {
  @extend .alert;
  @extend .important;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

经过编译会输出以下css内容:

.alert, .important-error {
  padding: 10px;
  background-color: silver;
  color: white; }

.important, .important-error {
  font-weight: bold;
  font-size: larger; }

.important-error {
  background-color: red; }
1
2
3
4
5
6
7
8
9
10
11

连锁 @extend

选择器可以连锁继承。

示例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.important {
  @extend .alert;
  font-weight: bold;
  font-size: larger;
}

.important-error {
  @extend .important;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

经过编译会输出以下css内容:

.alert, .important, .important-error {
  padding: 10px;
  background-color: silver;
  color: white; }

.important, .important-error {
  font-weight: bold;
  font-size: larger; }

.important-error {
  background-color: red; }
1
2
3
4
5
6
7
8
9
10
11

占位符选择器

你可能发现被继承的css父类并没有被实际应用，也就是说html代码中没有使用该类，它的唯一目的就是扩展其他选择器。

对于该类，可能不希望被编译输出到最终的css文件中，它只会增加CSS文件的大小，永远不会被使用。

这就是占位符选择器的作用。

占位符选择器类似于类选择器，但是，它们不是以句点(.)开头，而是以百分号(%)开头。

当在Sass文件中使用占位符选择器时，它可以用于扩展其他选择器，但不会被编译成最终的CSS。

占位符选择器用法示例：

%alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend %alert;
  background-color: dodgerblue;
}

.success {
  @extend %alert;
  background-color: green;
}

.error {
  @extend %alert;
  background-color: red;
}

.warning {
  @extend %alert;
  background-color: orange;
}
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

经过编译会输出以下css内容:

.info, .success, .error, .warning {
  padding: 10px;
  background-color: silver;
  color: white; }

.info {
  background-color: dodgerblue; }

.success {
  background-color: green; }

.error {
  background-color: red; }

.warning {
  background-color: orange; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意，编译后的CSS中不包含%alert选择器。