SASS 是一种 CSS 预处理器，它提供了一些便捷的语法特性来帮助我们更好地组织和编写样式代码。其中一个非常实用的功能就是 :extend，它可以让我们定义一些可复用的样式规则，并在其他选择器中扩展这些规则，从而避免出现冗余的 CSS。
不过，在使用 :extend 的时候需要注意一些事项，否则可能会导致一些出乎意料的行为。下面就来介绍一下在 SASS 代码中使用 :extend 时需要注意的一些细节。
选择器的优先级
使用 :extend 扩展样式规则时，必须要注意选择器的优先级。如果选择器的优先级不正确，可能会导致样式出错或不生效。
例如，以下代码就是一个例子：
-- -------------------- ---- ------- ---- - ----------------- ----- ------ ------ - ---- - -------------- - ---------- - ----------------- ---- -
在这个例子中，我们定义了一个可复用的按钮样式 %btn，然后在 .btn 选择器中使用 :extend 扩展了这个样式。但是，由于 .btn 的优先级较低，所以在 button.btn 中定义的 background-color 样式会覆盖 :extend 中的样式，导致最终的按钮背景色变成了红色，而不是蓝色。
为了避免这种问题的出现，我们需要在定义选择器时合理地设置优先级。一般来说，选择器的优先级高低与它们的长度和特殊性有关。如果要提高选择器的优先级，可以通过增加选择器的长度或增加选择器的特殊性来实现。
:extend 和 @extend 的区别
在 SASS 中，有两种方式可以使用 :extend 扩展样式规则：用 :extend 属性在选择器中直接使用，或者使用 @extend 关键字定义一个继承类，然后在选择器中使用这个类并传递参数。
这两种方式之间有一些区别，需要根据具体情况进行选择。
在使用 :extend 属性的时候，我们可以定义一个 %placeholder 类型的规则，并在选择器中使用 :extend 属性将这个规则扩展到其他选择器中，如上文的例子所示。
而在使用 @extend 关键字的时候，我们需要先定义一个基类，并在其他选择器中使用 @extend 关键字继承这个基类，如下面的例子所示：
-- -------------------- ---- ------- ---- - ----------------- ----- ------ ------ - -------- - ------- ----- ---------- ----- -
这两种方式的使用场景有所不同。如果我们只需要定义一些可复用的样式规则，并在其他选择器中使用这些规则，那么可以使用 :extend 属性。
而如果我们需要定义一些基类，然后在不同的子类中使用不同的参数，以达到不同的效果，那么就应该使用 @extend 关键字。在这个案例中，我们定义了一个基类 .btn，然后在 .btn-big 中使用 @extend 关键字继承了这个基类，并在 .btn-big 中新增了 font-size 样式。
使用 @extend 时避免重复扩展
使用 @extend 关键字可以让我们定义一些通用的样式规则，并在不同的选择器中使用这些规则。不过，如果在同一个选择器中多次使用 @extend，并将同一个基类重复扩展，可能会导致一些问题。
以下是一个例子：
-- -------------------- ---- ------- ---- - ----------------- ----- ------ ------ - -------- - ------- ----- ---------- ----- - ---------- - ------- ----- ----------------- ---- -
在这个例子中，我们在 .btn-hover 中再次使用了 @extend 关键字扩展了 .btn，这导致 .btn-big 中定义的 font-size 样式也被同步应用到了 .btn-hover 上，从而出现了一些 Bug。
为了避免这种问题，我们可以使用 mixins 来替代 @extend 关键字。比如，我们可以将基类 .btn 定义为一个 mixin，然后在 .btn-big 和 .btn-hover 中分别调用这个 mixin。
总结
在 SASS 代码中使用 :extend 扩展样式规则时，需要注意选择器的优先级、:extend 和 @extend 的区别，以及使用 @extend 时避免重复扩展等问题。如果使用得当，:extend 可以帮助我们更加方便地组织和重用样式代码，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae5e7a48841e9894a649a7