Sass - @extend指令

前言

你是否遇到过这种情况：当一个样式类（class）含有另一个类的所有样式，并且它自己还有一些特定样式？

例如：假设我们设计需要一个普通错误的样式和一个严重错误的样式：

<!-- HTML -->
<div class="error seriousError">
  Oh no! You've been hacked!
</div>

/* CSS */
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

不幸的是，这意味着我们必须时刻记住使用 .seriousError 的时候需要搭配使用 .error ，这对于维护来说是一个负担，甚至导致棘手的错误，并且导致无语意的样式。

@extend指令可以高效地避免这些问题，它告诉 Sass 一个选择器的样式应该继承另一选择器。

@extend指令

简单来说，它能够在多个选择器中通过继承的方式共享一段样式(完善上述例子)：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为CSS：

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

.seriousError {
  border-width: 3px;
}

这意味着 .error 所定义的所有样式也适用于 .seriousError ，需要注意的是，除了 .seriousError 的特定样式外，相当于每个带有 .seriousError 类的元素也带有 .error 类。

---

其他使用了 .error 规则也会同样继承给 .seriousError ，例如，如果我们有特殊错误样式的hack：

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

当其他元素应用 .seriousError 类时，同样会使用 hacked.png 背景。