SASS 中的继承和重载 (@extend) 的使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 CSS 来定义样式，但是 CSS 语言本身并没有提供很好的复用机制。SASS（Syntactically Awesome Style Sheets）是一个 CSS 预处理器，它提供了一些高级功能，其中就包括继承和重载的功能。

什么是继承和重载

继承是指在一个选择器中使用另一个选择器的样式属性，从而可以避免在多个地方重复定义同样的样式。例如，我们可以定义一个基础按钮样式：

.btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

然后，在需要使用按钮的地方，我们可以通过 @extend 关键字引用这个样式：

.submit-btn {
  @extend .btn;
  background-color: #3498db;
  color: #fff;
}

这样，submit-btn 元素就继承了 btn 元素的样式，并且添加了一些自定义样式。

重载是指在使用继承的同时，可以通过在 @extend 命令中指定不同的属性值来修改基础样式。例如：

.warning-btn {
  @extend .btn;
  border: 1px solid #f00;
}

这里我们重载了 border 属性，使得 warning-btn 按钮的边框颜色变为红色。

继承和重载在 SASS 中的语法非常简单，只需要使用 @extend 关键字即可。以下是一些使用技巧：

虽然继承和重载可以方便地减少样式代码量，但是滥用它们会导致样式文件变得难以维护。如果继承的样式发生了变化，所有使用 @extend 的样式都会受到影响。因此，建议只在需要复用的情况下使用继承和重载。

在 SASS 中，@extend 只能在同一文件中的元素之间使用。如果你在不同的文件中使用了同样的选择器，并尝试使用 @extend 来继承样式，则会引起编译错误。因此，建议只在同一文件中的块级元素中使用继承和重载。

SASS 中有一种占位符选择器（placeholder selector），不同于普通选择器，它不会生成任何样式，并且只能用于继承。占位符选择器以 % 开头，例如：

%btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

然后在需要使用样式的地方，使用 @extend 引用：

.submit-btn {
  @extend %btn;
  background-color: #3498db;
  color: #fff;
}

优点是占位符选择器不会生成冗余的 CSS 代码，而且可以很方便地定义一个中间层样式。

如果想在继承基础样式的同时，添加一些新的属性，可以这样写：

.submit-btn {
  @extend %btn;
  background-color: #3498db;
  color: #fff;
  &:hover {
    background-color: #2980b9;
  }
}

这里我们在继承 .btn 样式基础上，添加了背景色和文字颜色，并且定义了鼠标悬停时的背景色。

SASS 中的继承和重载功能可以大大提高 CSS 的复用性，更重要的是可以增强代码的可读性和可维护性。但是在使用时需要注意使用技巧，避免滥用带来的问题。以上是一些常用的技巧和实践，希望对大家有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66542781d3423812e48c24ed