在前端开发中，CSS 的复用性一直是一个比较麻烦的问题。通常情况下，我们会使用类名来实现样式的复用，但是这种方式并不够灵活和高效。SASS 中的 @extend 指令可以很好地解决这个问题，本文将介绍如何深度优化 @extend 指令的使用。
@extend 指令的基本用法
@extend 指令可以继承一个已有的选择器，从而实现样式的复用。例如，我们有一个 .btn 类，其中定义了按钮的基本样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- -
现在我们想要定义一个带有圆角的按钮，可以使用 @extend 指令来继承 .btn 类的样式：
.round-btn {
@extend .btn;
border-radius: 20px;
}这样，.round-btn 类就继承了 .btn 类的样式，并且添加了一个 border-radius 属性。最终生成的 CSS 代码如下：
-- -------------------- ---- ------- ----- ---------- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - ---------- - -------------- ----- -
可以看到，.btn 和 .round-btn 类都被编译成了同一个样式，这样就实现了样式的复用。
深度优化 @extend 指令的使用
虽然 @extend 指令可以很方便地实现样式的复用，但是如果使用不当，就会导致生成的 CSS 代码过于冗长，从而影响页面的性能。下面介绍一些深度优化 @extend 指令的使用方法。
避免多重继承
在 SASS 中，可以使用多重继承来实现更灵活的样式复用。例如，我们可以定义一个 .text-center 类来实现文本居中的样式：
.text-center {
text-align: center;
}然后，我们可以在 .btn 类中继承 .text-center 类，从而实现按钮内部文本居中的效果：
-- -------------------- ---- ------- ---- - ------- ------------- -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- -
这样，.btn 类就继承了 .text-center 类的样式，文本就居中了。但是，如果我们再定义一个 .card 类，并且也想要让其中的文本居中，就会出现问题：
.card {
@extend .text-center;
padding: 16px;
background-color: #fff;
}此时，.card 类就会继承 .text-center 类和 .btn 类的样式，生成的 CSS 代码如下：
-- -------------------- ---- ------- ------------- ----- ----- - ----------- ------- - ----- ----- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - ----- - -------- ----- ----------------- ----- -
可以看到，.card 类继承了 .btn 类的样式，这并不是我们想要的结果。因此，在使用 @extend 指令时，应该避免多重继承，尽量保持继承链的简洁。
使用 % 占位符
在 SASS 中，可以使用 % 占位符来定义一个不会被编译成 CSS 的选择器。这种选择器只能通过 @extend 指令来使用，从而实现样式的复用。例如，我们可以将上面的 .btn 类改写成一个 %placeholder：
-- -------------------- ---- ------- ---- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - ---- - ------- ----- - ---------- - ------- ----- -------------- ----- -
这样，生成的 CSS 代码就只包含了两个选择器：
-- -------------------- ---- ------- ----- ---------- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - ---------- - -------------- ----- -
可以看到，使用 % 占位符可以避免样式的重复，从而减少生成的 CSS 代码的大小。
使用 @at-root 指令
在 SASS 中，可以使用 @at-root 指令来将样式规则提升到根选择器的层级，从而避免生成过多的嵌套。例如，我们有一个 .container 类，其中包含一个 .box 类：
-- -------------------- ---- -------
---------- -
-------- -----
----------------- -----
---- -
-------- ----
----------------- -----
-
-这样，生成的 CSS 代码就包含了嵌套的选择器：
-- -------------------- ---- ------- ---------- - -------- ----- ----------------- ----- - ---------- ---- - -------- ---- ----------------- ----- -
如果我们想要将 .box 类的样式提升到根选择器的层级，可以使用 @at-root 指令：
-- -------------------- ---- -------
---------- -
-------- -----
----------------- -----
-------- ---- -
-------- ----
----------------- -----
-
-这样，生成的 CSS 代码就只包含了一个选择器：
-- -------------------- ---- ------- ---------- - -------- ----- ----------------- ----- - ---- - -------- ---- ----------------- ----- -
可以看到，使用 @at-root 指令可以减少生成的 CSS 代码的大小，从而提高页面的性能。
总结
@extend 指令是 SASS 中实现样式复用的重要工具，但是使用不当会导致生成的 CSS 代码过于冗长，从而影响页面的性能。本文介绍了一些深度优化 @extend 指令的使用方法，包括避免多重继承、使用 % 占位符和 @at-root 指令等。希望本文对大家了解 SASS 中 @extend 指令的深度优化有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e543ff1886fbafa40fc21f