- 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;
}
经过编译会输出以下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; }
多个@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;
}
经过编译会输出以下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; }
连锁 @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;
}
经过编译会输出以下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; }
占位符选择器
你可能发现被继承的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;
}
经过编译会输出以下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; }
注意，编译后的CSS中不包含%alert选择器。