八、sass - @extend样式继承

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 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 时，必须在同一块域内。