SASS 是一种 CSS 预处理器，它允许我们使用变量、条件语句、函数等高级语言特性扩展 CSS，并且支持继承和占位符这两种特殊的样式复用方式。在本文中，我们将重点介绍如何使用 SASS 中的继承和占位符实现样式复用。
继承 (@extend)
继承是 SASS 中的一种样式复用方式，它允许我们从一个选择器中继承样式规则，并将其应用到另一个选择器中。使用继承可以大大减少样式表的大小，并使代码更易于维护。
使用 @extend 实现继承
在 SASS 中，我们可以使用 @extend 指令来实现继承。@extend 接受一个选择器作为参数，并将当前选择器继承该选择器中的样式规则。下面是一个使用 @extend 实现继承的例子：
-- -------------------- ---- ------- -- ------ -- -------- - ------ ------ ------- ------ ----------------- ----- - -- ------ -- -------- - ------- --------- ----------------- ------ - -- ------ -- -------- - ------- --------- ----------------- ------- - -- ------ -- ------- - ------- --------- ----------------- ---- -
在上面的例子中，我们定义了一个基本样式 .example ，然后分别从 .success 、.warning 和 .danger 中继承了该样式，并在继承的基础上修改了背景颜色。由于这些样式都是从同一个基本样式中继承而来，因此它们具有相同的宽度和高度，而只有背景颜色不同。
继承的注意事项
使用继承要注意以下几点：
- 继承时只会复制选择器中的样式规则，并不会复制选择器本身。
- 继承选择器中的伪类和伪元素可能会导致样式不生效。
- 继承时要注意选择器优先级的问题，因为继承的样式会被插入到选择器的前面。
占位符 (%)
占位符是 SASS 中另一种样式复用方式，它与继承类似，但是占位符的样式规则不会直接产生 CSS 输出，在应用时需要使用 @extend 指令将占位符的样式规则转换成实际的 CSS 样式规则。
使用占位符实现样式复用
为了使用占位符来实现样式复用，我们需要在样式表中定义一个占位符，并在需要应用该样式时使用 @extend 指令将其应用到选择器中。下面是一个使用占位符实现样式复用的例子：
-- -------------------- ---- ------- -- ----- -- ------ - ------ ------ ------- ------ ----------------- ----- ------- --- ----- ----- -------- ----- - -- ----- -- -------- - ------- ------- ----------------- ------ - -- ----- -- -------- - ------- ------- ----------------- ------- - -- ----- -- ------- - ------- ------- ----------------- ---- -
在上面的例子中，我们定义了一个占位符 %panel ，然后分别从 .success 、.warning 和 .danger 中应用该占位符，并在应用的基础上修改了背景颜色。由于占位符不会直接产生 CSS 输出，因此不会产生冗余的样式规则，样式表也会更加简洁。
占位符的好处
使用占位符实现样式复用有以下几个好处：
- 占位符可以像类一样定义样式规则，但是不会产生冗余的样式规则，可以减少样式表的大小。
- 占位符不会直接产生 CSS 输出，因此可以避免样式被重复输出的问题。
- 占位符和继承类似，但是更加灵活和方便，可以实现多个组合样式的复用。
总结
在 SASS 中，我们可以使用继承和占位符这两种特殊的样式复用方式，来避免重复编写重复的 CSS 代码，并使样式表更加简洁和易于维护。使用继承时要注意选择器优先级的问题，使用占位符时可以减少样式表的大小，并避免样式被重复输出的问题。在实际的开发中，我们可以根据需要选择不同的样式复用方式，来优化我们的样式表和提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b1e54148841e9894e440e0