在前端开发中，我们经常会使用 CSS 来定义样式，但是 CSS 语言本身并没有提供很好的复用机制。SASS（Syntactically Awesome Style Sheets）是一个 CSS 预处理器，它提供了一些高级功能，其中就包括继承和重载的功能。
什么是继承和重载
继承是指在一个选择器中使用另一个选择器的样式属性，从而可以避免在多个地方重复定义同样的样式。例如，我们可以定义一个基础按钮样式：
---- - -------- ---- ----- ------- --- ----- ----- -------------- ---- -
然后，在需要使用按钮的地方，我们可以通过 @extend 关键字引用这个样式：
----------- - ------- ----- ----------------- -------- ------ ----- -
这样，submit-btn 元素就继承了 btn 元素的样式，并且添加了一些自定义样式。
重载是指在使用继承的同时，可以通过在 @extend 命令中指定不同的属性值来修改基础样式。例如：
------------ - ------- ----- ------- --- ----- ----- -
这里我们重载了 border 属性，使得 warning-btn 按钮的边框颜色变为红色。
如何使用继承和重载
继承和重载在 SASS 中的语法非常简单，只需要使用 @extend 关键字即可。以下是一些使用技巧：
不要滥用继承和重载
虽然继承和重载可以方便地减少样式代码量，但是滥用它们会导致样式文件变得难以维护。如果继承的样式发生了变化，所有使用 @extend 的样式都会受到影响。因此，建议只在需要复用的情况下使用继承和重载。
只在同一文件中的块级元素中使用继承和重载
在 SASS 中，@extend 只能在同一文件中的元素之间使用。如果你在不同的文件中使用了同样的选择器，并尝试使用 @extend 来继承样式，则会引起编译错误。因此，建议只在同一文件中的块级元素中使用继承和重载。
在 @extend 中使用占位符
SASS 中有一种占位符选择器（placeholder selector），不同于普通选择器，它不会生成任何样式，并且只能用于继承。占位符选择器以 % 开头，例如：
---- - -------- ---- ----- ------- --- ----- ----- -------------- ---- -
然后在需要使用样式的地方，使用 @extend 引用：
----------- - ------- ----- ----------------- -------- ------ ----- -
优点是占位符选择器不会生成冗余的 CSS 代码，而且可以很方便地定义一个中间层样式。
可以在继承时添加属性
如果想在继承基础样式的同时，添加一些新的属性，可以这样写：
----------- -
------- -----
----------------- --------
------ -----
------- -
----------------- --------
-
-这里我们在继承 .btn 样式基础上，添加了背景色和文字颜色，并且定义了鼠标悬停时的背景色。
总结
SASS 中的继承和重载功能可以大大提高 CSS 的复用性，更重要的是可以增强代码的可读性和可维护性。但是在使用时需要注意使用技巧，避免滥用带来的问题。以上是一些常用的技巧和实践，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66542781d3423812e48c24ed