SASS 是一种基于 CSS 的预处理器，它提供了许多有用的功能，如变量、嵌套、混合、继承、占位符选择器等。其中继承和占位符选择器是优化代码的重要工具，可以减少重复的样式代码，并提高代码的可维护性。
继承
继承是 SASS 中的一个重要特性，它允许一个选择器从另一个选择器继承样式。这样可以减少代码的重复，提高代码的可读性和可维护性。
基本语法
继承使用 @extend 关键字，后面跟着要继承的选择器。例如：
-- -------------------- ---- ------- -- -------- ----- - ---------- ----- ------ ----- - -- ------ ------ - ------- ------ ------------ ----- -
上面的代码中，.title 继承了 .base 的样式，同时添加了 font-weight 属性。编译后的 CSS 代码如下：
.base, .title {
font-size: 16px;
color: #333;
}
.title {
font-weight: bold;
}注意事项
- 继承只能继承选择器的样式，不能继承属性。
- 继承时会将当前选择器和被继承的选择器合并成一个选择器，因此会增加 CSS 的复杂度。
- 继承时要注意选择器的权重，避免出现样式覆盖的问题。
占位符选择器
占位符选择器是另一个优化代码的重要工具，它与普通选择器不同，不会直接编译成 CSS，而是只有在被继承时才会生成对应的 CSS 样式。这样可以减少不必要的样式代码，提高代码的可读性和可维护性。
基本语法
占位符选择器使用 % 符号定义，例如：
-- -------------------- ---- ------- -- ---------- ----- - ---------- ----- ------ ----- - -- -------- ------ - ------- ------ ------------ ----- -
上面的代码中，%base 是一个占位符选择器，.title 继承了 %base 的样式，同时添加了 font-weight 属性。编译后的 CSS 代码如下：
.title {
font-size: 16px;
color: #333;
font-weight: bold;
}注意事项
- 占位符选择器不会直接编译成 CSS 样式，只有在被继承时才会生成对应的 CSS 样式。
- 占位符选择器不能像普通选择器一样直接使用，只能用
@extend继承。 - 占位符选择器的优点是可以减少 CSS 文件的体积，缺点是维护时要注意继承关系，避免出现样式覆盖的问题。
实例
下面是一个实际的例子，展示如何使用继承和占位符选择器来优化代码。
-- -------------------- ---- -------
-- ----------
----- -
---------- -----
------------ ----
-
-- --------
------ -
------- ------
------------ -----
-
-- --------
----- -
------- ------
------ -----
-
-- --------
----- -
------- ------
------ --------
---------------- -----
------- -
---------------- ----------
-
-上面的代码中，定义了一个占位符选择器 %text，它包含了一些通用的文本样式。然后定义了三个选择器 .title、.text 和 .link，它们分别继承了 %text 的样式，并添加了一些自己的样式。这样可以减少重复的样式代码，提高代码的可读性和可维护性。
总结
继承和占位符选择器是 SASS 中优化代码的重要工具，它们可以减少重复的样式代码，提高代码的可读性和可维护性。在使用时要注意选择器的权重和继承关系，避免出现样式覆盖的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657c6dcbd2f5e1655d740b0f