Sass提供了选择器继承的功能，通过使用@extend指令，可以将一个选择器的样式继承到另一个选择器中，从而帮助你精简CSS代码。这种方法适用于希望共享相同样式的多个选择器。以下是一个简单的例子：
// 定义一个基础样式
.base-button {
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

// 使用选择器继承来精简CSS
.primary-button {
  @extend .base-button;
  background-color: #3498db;
  color: #ffffff;
}

.secondary-button {
  @extend .base-button;
  background-color: #e74c3c;
  color: #ffffff;
}

在上述例子中，.base-button定义了基础样式，而.primary-button和.secondary-button通过@extend继承了.base-button的样式，并且添加了它们自己的背景颜色和文字颜色。

当编译成CSS时，将产生类似下面的输出：
.base-button, .primary-button, .secondary-button {
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.primary-button {
  background-color: #3498db;
  color: #ffffff;
}

.secondary-button {
  background-color: #e74c3c;
  color: #ffffff;
}

这种方法有助于减少冗余的CSS代码，因为你可以共享基础样式而不必重复定义。然而，需要小心使用@extend，因为它可能导致生成的CSS选择器变得复杂，特别是在多层嵌套时。过度使用@extend可能会导致难以维护和理解的代码。


转载请注明出处：http://www.zyzy.cn/article/detail/6183/SASS