在进行前端页面开发的过程中，我们通常会使用 CSS 来设置页面的样式。但是，CSS 在处理样式继承时有一定的不便，无法很好地应对多个子类继承同一父类的情况。面对这个问题，SASS 可以帮你完美解决它。
SASS 的样式继承
SASS 是一种 CSS 预处理器，它可以让你在 CSS 中使用变量、函数、条件判断等高级功能以及让 CSS 更具可读性的语法。其中样式继承是 SASS 中非常重要的特性之一。
样式继承（@extend）可以让多个选择器的样式集成至一个共同的样式规则中。我们可以抽象出重复的样式，并定义成一个共有的类，然后让其他选择器去继承这个类。这样可以使我们的代码更加简洁、易于维护。
继承基础
使用 @extend 宏来实现样式继承，可以和 CSS 中的类选择器一样，把类名作为参数，调用 @extend 宏即可继承某个类的全部样式。
示例代码：
-- -------------------- ---- ------- -- -------- ------- - ---------- ----- ------ ----- ----------- ------- - -- -- ------- ------ ------ - ------- -------- ------------ ----- - --------- - ------- -------- ----------- ------- -
在上面的代码中，我们定义了一个 %shared 类，其中包含了 font-size、color、text-align 三个样式属性。在 .title 和 .subtitle 类中，我们都用了 @extend 宏来继承 %shared 类，从而实现了样式的复用。
经过编译生成的 CSS 代码如下：
-- -------------------- ---- ------- ------- --------- - ---------- ----- ------ ----- ----------- ------- - ------ - ------------ ----- - --------- - ----------- ------- -
从上面的代码中可以看到，.title 和 .subtitle 类的样式分别继承了 %shared 中的三个样式属性，生成的 CSS 样式也符合我们的预期。
使用继承实现主题样式
在前端开发中，我们常常需要实现多个主题的界面，这时候样式继承就可以大显身手了。下面我们就以实现两个主题样式（白天和黑夜）为例，来学习如何使用样式继承实现主题功能。
示例代码：
-- -------------------- ---- ------- -- ------------ ------ - -------- ----- ------- --- ------ - -- -------- ---- - ------- ------- ----------------- -------- ------ ----- - -- -------- ------ - ------- ------- ----------------- ----- ------ ----- -
在上述代码中，我们定义了一个 %theme 类，并在白天和黑夜两个主题中使用 @extend 宏来继承 %theme 类，只需更改相关属性即可实现不同主题下的样式。
经过编译生成的 CSS 代码如下：
-- -------------------- ---- ------- ----- ------ - -------- ----- ------- --- ------ - ---- - ----------------- -------- ------ ----- - ------ - ----------------- ----- ------ ----- -
从上面的代码中可以看出，在 %theme 类中定义的样式均被白天和黑夜两个主题所继承，而不同的样式属性则根据主题变化而变化。
使用继承实现响应式布局
SASS 的样式继承功能还可以用于响应式布局设计中。下面我们以实现两种不同布局（水平和垂直）为例来演示一下。
示例代码：
-- -------------------- ---- ------- -- ---------- ------- - ------- --- ------ --------- --------- - -- ---- --------- - ------- -------- -------- ----- ---------------- ------- ------------ ------- - -- ---- --------- - ------- -------- -------- ----- --------------- ------- ---------------- ------- ------------ ------- -
在上述代码中，我们定义了一个 %layout 类，并在水平和垂直两种布局中使用 @extend 宏来继承 %layout 类，同时定义了不同的样式属性即可实现不同的布局。
经过编译生成的 CSS 代码如下：
-- -------------------- ---- ------- ---------- --------- - ------- --- ------ --------- --------- - --------- - -------- ----- ---------------- ------- ------------ ------- - --------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- -
总结
通过以上示例代码，我们深入了解了 SASS 样式继承的使用技巧，并且了解了样式继承在实现主题样式和响应式布局上的应用。在开发中，我们应该善于利用 SASS 样式继承来提高代码的可维护性和可读性，从而加速代码开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf5cb29e06631ab9bc1c42