在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：
//样式如下
.error {
background-color: red;
}
.seriousError {
font-weight: bold;
}
//样式使用
<div class="error seriousError">
这是一个严重错误！
</div>
弊端：这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式，带来了很多不变：智能比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。
使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error {
color: red;
}
.seriousError {
@extend .error;
font-weight: bold;
}
//编译后
.error {
color: red;
}
.seriousError {
color: red;
font-weight: bold;
}
多重延伸 (Multiple Extends)
同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：
.error {
color: red;
}
.attention {
background-color:yellow;
}
.seriousError {
@extend .error;
@extend .attention;
font-weight: bold;
}
编译后：
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.attention, .seriousError {
font-size: 3em;
background-color: #ff0; }
.seriousError {
border-width: 3px; }
继续延伸 (Chaining Extends)
当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，例如：
.error {
color: red;
}
.attention {
@extend .error;
background-color:yellow;
}
.seriousError {
@extend .attention;
font-weight: bold;
}
编译后：
.error, .attention, .seriousError {
color: red; }
.attention, .seriousError {
background-color: yellow; }
.seriousError {
font-weight: bold; }
注意：在使用 @extend 时，必须在同一块域内。
