SASS @extend 深入探究：使用注意事项及常见问题解答-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，减少重复样式的编写是一个很重要的问题。在 Sass 中，使用 @extend 可以让我们更加方便地共享样式规则，减少代码量，提高代码质量。

但是在日常开发中，如果不注意使用 @extend ，就会出现一些问题，本文将对使用 @extend 的注意事项和常见问题进行解答，让你更好地使用 @extend。

什么是 @extend

在 Sass 中，@extend 是继承一个选择器的样式规则。例如，如果我们想要让 .error 类继承 .message 类的样式，可以这样写：

// www.javascriptcn.com code example
.message {
  font-size: 16px;
  color: #333;
}

.error {
  @extend .message;
  border: 1px solid red;
}

这样，.error 类将继承 .message 类的样式规则，最终生成的 CSS 代码如下：

.message, .error {
  font-size: 16px;
  color: #333;
}

.error {
  border: 1px solid red;
}

注意事项

不要过度使用 @extend

虽然使用 @extend 可以减少代码量，但是如果使用得不当，会增加代码的复杂度，并影响代码的性能。

一般来说，如果一个样式规则以后只会被继承而不被使用，就应该考虑将其定义为一个 mixin，而不是一个普通的样式规则。

注重选择器的顺序

在使用 @extend 的时候，选择器的顺序很重要，特别是当元素存在多个类名时，选择器的顺序影响着哪个样式被继承。

例如，当一个元素同时存在 .alert 类和 .error 类时，如果我们想让 .error 类继承 .alert 类的样式规则，可以这样写：

// www.javascriptcn.com code example
.alert {
  font-size: 14px;
  color: #333;
}

.error {
  @extend .alert;
  border: 1px solid red;
}

但是如果我们想让 .alert 类继承 .error 类的样式规则，就要先定义 .error 类，再定义 .alert 类。

// www.javascriptcn.com code example
.error {
  border: 1px solid red;
}

.alert {
  @extend .error;
  font-size: 14px;
  color: #333;
}

注意继承关系的方向

在继承样式的时候，要注意继承关系的方向。如果两个选择器的样式规则互相继承，就会形成死循环，导致编译出错或者生成一个巨大的 CSS 文件。

例如下面的代码就会形成死循环：

// www.javascriptcn.com code example
.message {
  @extend .error;
  font-size: 16px;
  color: #333;
}

.error {
  @extend .message;
  border: 1px solid red;
}

常见问题解答

为什么继承的样式没有应用？

如果继承的样式没有应用，可能是选择器的顺序不对。可以通过观察生成的 CSS 代码来查看是否有错误。

如果选择器的顺序没问题，也可以尝试将样式规则改为 mixin，看看是否有效。

为什么继承的样式与预期不符？

如果继承的样式与预期不符，可能是选择器的顺序、继承关系的方向不对，也可能是其他样式规则覆盖了继承的样式。

可以通过观察生成的 CSS 代码和样式视图来查看问题所在，并调整选择器的顺序和继承关系。

为什么使用了 @extend 后编译出的 CSS 文件很大？

如果使用了 @extend 后编译出的 CSS 文件很大，可能是定义了太多的样式规则，而且这些样式规则都被其他样式继承。在这种情况下，可以考虑使用 @extend 改写部分样式规则或者提取重复的样式规则为 mixin 减少代码量。

示例代码

以下是一个示例代码，演示了如何使用 @extend 减少代码量：

// www.javascriptcn.com code example
$font-family: 'Helvetica Neue', sans-serif;

.text {
  font-family: $font-family;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.alert {
  padding: 10px;
  border: 1px solid red;
  @extend .text;
}

.error {
  font-weight: bold;
  color: red;
  @extend .alert;
}

编译出来的 CSS 代码如下：

// www.javascriptcn.com code example
.text, .alert, .error {
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.alert, .error {
  padding: 10px;
  border: 1px solid red;
}

.error {
  font-weight: bold;
  color: red;
}

这样，我们就可以很方便地定义 .text 类，然后让 .alert 类和 .error 类继承 .text 类的样式规则。这样，我们的代码量就减少了很多，而且样式的复用性也得到了提高。

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

SASS @extend 深入探究：使用注意事项及常见问题解答