SASS 中的扩展 / 继承：什么是它，为什么使用它？
引言
CSS 是前端开发中必不可少的一份工作之一，而 SASS 是一种预处理器，它可以在 CSS 中自定义一些功能，比如使用变量、混合器等等。但是，在 SASS 中，扩展 / 继承是一种相当实用的特性，它可以减少重复代码，优化样式代码的大小，并且使样式更加清晰易懂。本文将会围绕着 SASS 中的扩展 / 继承这一主题，为你深入解析这一技术，以及展示如何在你的项目中应用它。
什么是 SASS 中的扩展 / 继承？
SASS 中的扩展 / 继承遵循了OOP(Object Oriented Programming，面向对象编程)的设计理念，通常被标记为用于代码的 DRY(Don't Repeat Yourself,不要重复代码)策略。它的基本思路是遵循一个组件化的方法来创建样式代码，使重复的样式代码可以被集中管理和控制。在 Sass 中，扩展 / 继承是用 @extend 关键字实现的。通过使用这个关键字可以实现对一个样式规则中样式的复制，这样就可以减少不必要的样式代码，并且在样式表中可以更快地找到相同的 CSS 代码。
如何使用 SASS 中的扩展 / 继承？
考虑如下的示例：
-- -------------------- ---- ------- ---- - -------- ---- ----- ---------- ----- -------------- ---- ------- ----- - --------- - ----------- ----- ------ ----- - -------- - ----------- ---- ------ ----- -展开代码
看起来这个没有问题，但是代码所占据的空间有点过多。我们可以使用 SASS 中的扩展 / 继承来重构这个代码块：
-- -------------------- ---- ------- ---- - -------- ---- ----- ---------- ----- -------------- ---- ------- ----- ---------- - ----------- ----- ------ ----- - --------- - ----------- ---- ------ ----- - -展开代码
这个新的代码可以更加清晰易懂地阅读，也更加节省一些空间。
优势
SASS 中的扩展 / 继承可以减少样式表的大小，而不会影响样式表的浏览器性能。它还使样式代码变得更加简洁明了。因此，在大型项目中，更需要使用 SASS 的扩展 / 继承这一技术。另外，它还可以使你的代码更加干净，并且使你的代码更加容易地进行维护。
总结
本文对 SASS 中的扩展 / 继承进行了详细的介绍，并且展示了如何在实际应用中使用它。为什么要使用 SASS 中的扩展 / 继承？因为它可以减少重复的代码，减少样式表的大小，并且使样式更加清晰易懂。SASS 中的扩展 / 继承是一个很棒的功能，你应该在你的项目中开始使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cea00bb5eee0b525658e3b
