在前端开发中，我们经常需要编写重复性高的代码块，例如按钮样式，表单样式等。这些代码块在不同的页面中都需要复用，如果每次都重复编写会造成很大的浪费。SASS 中提供了继承机制，可以实现可复用的代码块，减少代码的冗余，提高代码的可维护性。
Inheritance 的基本使用方法
SASS 中可以通过 @extend 关键字实现继承，例如我们有一个基本的按钮样式：
-- -------------------- ---- ------- ---- - -------- ----- ------- --- ----- ----- ---------- ----- ------ ----- ----------------- ----- ----------- ------- -------------- ---- -
如果我们需要在按钮上加上一个圆角的效果，可以通过继承的方式实现：
.btn-round {
@extend .btn;
border-radius: 30px;
}在 .btn-round 中使用了 @extend .btn，表示 .btn-round 继承了 .btn。这样，.btn-round 就包含了 .btn 的所有属性和值，并且额外添加了 border-radius: 30px，形成了一个圆角的按钮样式。这种继承方式可以减少代码的冗余，提高代码的可维护性。
继承的局限性
继承的方式虽然可以实现代码的复用，但也存在一些局限性。例如继承的代码块如果被修改，所有继承它的代码块都会受到影响。这在一些情况下可能是需要避免的，因为不同的页面可能需要不同的样式。另外，在嵌套的结构中，继承过深可能会导致样式冲突或难以维护。
Inheritance 的高级使用方法
为了解决继承的局限性，SASS 提供了更高级的继承机制，包括占位符、多重继承和样式扩展等。
占位符（Placeholder）
占位符是指不会直接编译成 CSS 的代码块，它只有在被继承时才会被编译。占位符以 % 开头定义，例如：
-- -------------------- ---- ------- ---- - -------- ----- ------- --- ----- ----- ---------- ----- ------ ----- ----------------- ----- ----------- ------- -------------- ---- -
在使用时，通过 @extend %btn 的方式引用占位符，例如：
.btn {
@extend %btn;
}
.btn-round {
@extend %btn;
border-radius: 30px;
}这样，生成的 CSS 中就不会包含 %btn，减少了 CSS 的冗余。
多重继承
多重继承是指一个代码块可以同时继承多个代码块的属性和值。例如：
-- -------------------- ---- ------- ----------- - -------- ----- ------- --- ----- ----- ---------- ----- ------ ----- ----------------- ----- ----------- ------- - ---------- - ------- ------------ -------------- ----- - ----------- - ------- ------------ -------------- -- - ---- - ------- ------------ - ---------- - ------- ----------- - ----------- - ------- ------------ -
在上面的例子中，我们定义了三个占位符，%btn-common、%btn-round 和 %btn-square。%btn-round 和 %btn-square 都继承了 %btn-common 中的属性和值，并额外添加了自己的 border-radius。在使用 .btn、.btn-round 和 .btn-square 的时候，分别继承了不同的代码块，实现了多重继承的效果。
样式扩展
样式扩展是指定义了一个基本样式，然后在其他样式中扩展这个样式的属性和值。扩展与继承的区别是，扩展用到的是选择器，而继承用到的是代码块。
例如我们有一个基本样式：
-- -------------------- ---- ------- ---- - -------- ----- ------- --- ----- ----- ---------- ----- ------ ----- ----------------- ----- ----------- ------- -------------- ---- -
如果我们只想改变 .btn 的背景色和字体颜色，可以使用样式扩展的方式实现：
-- -------------------- ---- ------- --------- - ------- ----- ----------------- ----- ------ ----- - -------- - ------- ----- ----------------- ---- ------ ----- -
在使用 .btn-blue 和 .btn-red 的时候，分别扩展了 .btn 的背景色和字体颜色，实现了样式的扩展和复用。
总结
SASS 中的继承机制是实现可复用的代码块的重要方式，它可以有效地减少代码的冗余，同时提高代码的可维护性。除了基本的继承方式，还有占位符、多重继承和样式扩展等更高级的继承机制，提供了更灵活的代码复用方式。在使用继承时，需要注意局限性，避免出现样式冲突或难以维护的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65178d6d95b1f8cacdfbb24f