SASS 是一种 CSS 预处理器，它给我们提供了更加灵活、高效的 CSS 编写方式。其中一个非常强大的特性就是继承。这个特性可以让我们避免重复定义相同的 CSS 属性，同时也可以让我们更加方便地维护样式。
但是，如果不正确使用继承，就可能会带来一些问题。因此，在使用 SASS 继承的时候，我们需要注意一些细节。
SASS 继承的基本语法
SASS 继承的语法非常简单：
.selector {
/* 定义样式 */
}
.child-selector {
@extend .selector;
/* 继承样式 */
}其中，.selector 是我们定义的一个样式块的选择器，.child-selector 是我们希望继承这个样式块的选择器。通过 @extend 关键字，.child-selector 就可以继承 .selector 的所有 CSS 属性。
继承时的注意事项
避免选择器嵌套过深
在使用 SASS 的时候，我们可能会选择使用嵌套的选择器来描述样式。但是，如果一个选择器的嵌套层次过深，就会导致 CSS 生成的效率非常低，同时也会使得样式的继承关系变得复杂。
因此，我们应该尽量避免选择器嵌套过深。当我们使用继承的时候，尤其要注意不要在选择器中嵌套太多层级。
避免继承过多属性
一个样式块中可能会包含很多属性，但是在实际使用中，我们可能只需要继承其中的一部分属性。如果我们直接继承整个样式块，就可能带来一些不必要的样式。
因此，我们需要尽量避免继承过多的属性。在继承的时候，我们应该只继承需要的属性，而不是继承整个样式块。
避免循环继承
循环继承指的是，某个样式块继承自它本身，或者是继承自其他继承这个样式块的样式块。这种情况下，CSS 的生成过程可能会陷入死循环，导致浏览器性能下降，甚至出现错误。
因此，在使用 SASS 继承的时候，我们需要避免循环继承。如果必须要使用循环继承，我们需要特别小心，避免出现问题。
继承的实际应用
在实际应用中，SASS 继承可以帮助我们简化样式代码，提高开发效率。以下是一些常见的继承应用：
统一按钮样式
当我们需要让多个按钮拥有相同的样式时，可以通过 SASS 继承来实现这一需求。首先，我们定义一个 .btn 样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ------- ----- -------------- ---- ---------- ----- ------------ ----- ----------- ------- ------- -------- -
然后，我们可以针对不同的按钮类型，定义不同的样式：
-- -------------------- ---- ------- ------------ - ------- ----- ----------------- -------- ------ ----- - -------------- - ------- ----- ----------------- -------- ------ ----- -
这样，就可以让 .primary-btn 和 .secondary-btn 继承 .btn 的所有属性，同时只需要定义特定的属性，就可以生成对应的样式。
统一表格样式
表格是 Web 应用中常见的组件之一，但是不同的表格可能需要有不同的样式。在使用 SASS 继承的时候，我们可以针对不同的表格类型，分别定义相应的样式，然后让这些样式继承自一个统一的表格样式。例如：
-- -------------------- ---- -------
------ -
---------------- ---------
------ -----
---------- -----
-
------------ -
------- -------
------- --- ----- --------
-
-------------- -
------- -------
----- ------------------ -
----------------- --------
-
-这样，我们就可以在 .basic-table 和 .striped-table 中重用 .table 的样式，同时定义特定的样式，实现不同类型的表格。
总结
SASS 继承是一种非常方便的样式复用方式，可以帮助我们提高开发效率。在使用继承的时候，我们需要注意一些细节，避免出现问题。同时，在实际应用中，继承可以帮助我们统一样式，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646193e1968c7c53b02ef3ba