引言
SASS 是 CSS 的预处理器，封装了很多方便的编写 CSS 的功能。其中，继承是在 SASS 中非常实用的功能之一，可以让样式之间更好地复用，同时也更加清晰明了。本文将介绍 SASS 中继承的基本语法，并分析其应用场景， 最后给出实例代码供参考。
继承的基本语法
在 SASS 中，可以通过 @extend 语句实现样式的继承。具体语法如下：
----- - ----- ---- - ----- - ------- ------ ------ ----- -
其中 .基类样式 为要继承的样式，.子类样式 为新定义的样式。
通过 @extend 将 .基类样式 的样式属性继承到 .子类样式，并在 .子类样式 中添加新的样式属性。
继承的应用场景
继承公用样式
在网页开发中，许多元素会使用同一种样式，比如各种表单控件的样式、按钮的样式等。如果每次都需要手写相同的样式，就会造成代码量的增大，而使用继承则可以极大地减少代码量。具体实现如下：
-- ------ -- ---- - -------- ------------- -------- ----- ---- -------------- ------ ---------- ------ - -- ------ -- ------------ - ------- ----- ------ ----- ----------------- ----- - -- ------ -- -------------- - ------- ----- ------ ----- ----------------- ----- -
如上代码所示，.primary-btn 和 .secondary-btn 都继承了 .btn 的基类样式，同时针对不同的场景重写了新的样式属性。这样，结果的 CSS 代码就会减少不少，且更加易读、易于维护。
继承伪类样式
由于大量的网站和应用程序更改链接的外观，让用户知道哪些链接可以点击。很多开发人员喜欢使用伪类，比如 a:hover，在鼠标悬停时改变链接颜色或背景色。在 SASS 中，我们同样可以使用继承实现复用 :hover 等伪类的样式。 具体实现如下：
-- ------ -- - - --------------------- ----------- - -- ------ -- -- ------- - -------------------------- - -- -- ---- ----- -- ---- - ------- -- ----------- ----- - ---------- - ------- -------- -
在上述代码中，可以观察到.btn:hover 通过 @extend 继承基类样式 a:hover 的实现，从而在不需要重复定义a:hover 的情况下实现。这样，当我们需要使用某种伪类时，不必再单独定义一次样式，而是可以直接继承到基类样式中。
实例代码
-- ---- -------- -- ---------- - ---------- ------- ------- - ----- - ---- - -------- ----- ---------- ----- - ---- - ---------- -- ------------ -- ----------- -- ------- - ----- - -- -- ---- ----- -- ----- - ------- ----------- - ----- - ------- ----- - ----- - ------- ----- ------ ---- -------------- ----- ----------------- ----- -------- ----- ----------- ------- -
可以看到，在以上 SASS 代码中，通过继承基类样式 .container、.row、.col 定义了一个常见的 Grid 布局样式， .main、.list、.item 继承这些基类样式，在进行样式调整之后实现了整个页面样式的一致性，同时保证了代码的简洁、易读性。
结论
继承是 SASS 中一种重要的特性，可以通过继承将样式属性复用，简化我们的样式代码。掌握 SASS 中的继承语法和应用场景，可以让我们的代码更加简洁易懂、易于维护。本文的示例代码可以参考实际项目中的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720499f2e7021665e01877a