SASS 中的 @extend 指令是什么？-猿码集

1. 简介

SASS (Syntactically Awesome Stylesheets) 是一种 CSS 预处理器，它在 CSS 的基础上增加了一些功能，例如变量、嵌套规则、mixin 等。SASS 中的 @extend 指令可以让样式表之间实现样式的继承，避免重复的 CSS 代码，提高样式表的可维护性和可扩展性。

2. @extend 规则

SASS 中的 @extend 指令可以让一个选择器继承另一个选择器的样式，从而避免重复的 CSS 代码。使用 @extend 可以让 CSS 样式表更具维护性，同时使代码量更少。

2.1 基本使用方式

@extend 指令的语法格式如下：


.selector {
  /* 基本的样式规则 */
}
.other-selector {
  @extend .selector;
  /* 继承样式 */
}

上述代码中，.selector 是定义一个基本的样式规则，而 .other-selector 则是继承样式。通过使用 @extend，.other-selector 指向了.selector，使得两个选择器具有相同的样式规则。

2.2 多个选择器继承同一规则

一个元素可以同时匹配多个选择器，因此可以通过 @extend 实现多个选择器继承同一规则的效果。例如：


.selector-1, .selector-2 {
  /* 基本的样式规则 */
}
.other-selector {
  @extend .selector-1;
  @extend .selector-2;
  /* 继承样式 */
}

在上述代码中，.other-selector 同时继承了 .selector-1 和 .selector-2 的样式规则。

2.3 单个选择器继承多个规则

一个选择器也可以同时继承多个规则。例如：


.selector-1 {
  /* 基本的样式规则 */
}
.selector-2 {
  /* 基本的样式规则 */
}
.other-selector {
  @extend .selector-1;
  @extend .selector-2;
  /* 继承样式 */
}

在上述代码中，.other-selector 继承了 .selector-1 和 .selector-2 的样式规则。

2.4 继承后的样式覆盖

如果一个选择器继承了另一个选择器的样式规则，同时自己也定义了一个相同的样式规则，则自己定义的样式规则将覆盖继承的样式规则。


.selector {
  font-weight: bold;
  color: #333;
}
.other-selector {
  @extend .selector;
  color: #f00;
}

在上述代码中，.other-selector 继承了 .selector 的样式规则，并定义了自己的 color 样式规则。这意味着 color: #333; 的样式规则被覆盖了。

2.5 继承后的选择器顺序

如果一个选择器继承了另一个选择器的样式规则，那么继承后的选择器的顺序与定义的顺序相同。例如：


.selector-1, .selector-2 {
  font-weight: bold;
  color: #333;
}
.other-selector {
  @extend .selector-2;
  @extend .selector-1;
}

在上述代码中，.other-selector 继承了 .selector-2 和 .selector-1 的样式规则，且继承后的选择器顺序与定义的顺序相同。

2.6 继承后的样式合并

如果两个选择器使用 @extend 继承了同一个选择器的样式规则，则继承后的样式会合并到一起，形成一个新的样式规则。


.selector {
  font-weight: bold;
  color: #333;
}
.selector-1 {
  @extend .selector;
  font-size: 14px;
}
.selector-2 {
  @extend .selector;
  font-size: 18px;
}
.other-selector {
  @extend .selector-1;
  @extend .selector-2;
}

在上述代码中，.selector-1 和 .selector-2 都继承了 .selector 的样式规则，同时自己也定义了一个 font-size 的样式规则。.other-selector 同时继承了 .selector-1 和 .selector-2 的样式规则，因此最终生成的样式规则为：


.other-selector {
  font-weight: bold;
  color: #333;
  font-size: 18px;
}

在继承后，.selector、.selector-1、.selector-2 的样式规则合并成了一个新的样式规则。

3. 问题与注意点

3.1 选择器的来源

在使用 @extend 实现样式的继承时，需要注意选择器的来源。被继承的选择器应当是具有通用性的选择器，而不是局部性的选择器。如下示例：


.container {
  width: 960px;
  margin: 0 auto;
}
.header {
  @extend .container;
  /* 这里容易出现问题 */
}

在上述代码中，选择器 .container 是具有通用性的选择器，它被定义为一个容器样式，用来表示页面的宽度和居中对齐。而选择器 .header 则是局部性的选择器，它的作用仅仅在头部区域。

如果使用 @extend 继承 .container 的样式规则，则头部区域的样式规则就会继承全局的样式规则，这很容易导致样式覆盖、样式污染等问题。

因此，在使用 @extend 时，应当尽量避免使用局部性的选择器，以免引起问题。

3.2 代码的可维护性

虽然使用 @extend 可以让代码更加简洁，但过度地使用 @extend 也会降低代码的可维护性。因为这会让代码变得更加抽象，难以理解和排错。因此，在使用 @extend 时，应当保持适度，避免过度抽象化。

3.3 代码的性能问题

使用 @extend 会增加样式表的继承层次，从而增加 CSS 渲染的时间。因此，在使用 @extend 时，应当避免继承层次过深，以免影响页面的性能。

4. 总结

@extend 指令是 SASS 中非常有用的一个功能，它可以让 CSS 样式表具有更好的可维护性和可扩展性。同时，@extend 也存在一些问题，例如代码的可读性、可维护性和性能问题。因此，在使用 @extend 时，需要注意选择器的来源、适度使用和避免过度抽象化。

SASS 中的 @extend 指令是什么？