介绍
SASS 是一种流行的 CSS 预处理器，它提供了强大的工具和特性，可以让前端开发更高效和优雅。其中一个重要的功能就是 @extend 指令，它能够让开发者在样式表中复用已有的样式，并且让 CSS 代码更加干净和简单。
最基本的 @extend 做法是使用一个空类选择器（placeholder），如 %placeholder，来定义一组通用的样式，然后在其他选择器中使用 @extend 来继承这些样式。这个方式相当于 CSS 中的类继承，让样式表更易读、易维护和易扩展。
在本文中，我们将通过一个实际的示例，展示如何在 SASS 中应用 @extend 指令，让你能够更加高效写出更好的 CSS 代码。
示例
假设我们有一个网站，需要将所有按钮都应用一个基本的样式，包括背景颜色、边框、字体和hover状态下的样式。
我们可以使用 @extend 指令来实现这个操作，代码如下：
-- ----------- ----------- --
---- -
----------------- -----
------- -----
-------------- ----
------ ------
---------- -----
-------- -----
----------- -------
---------------- -----
-------- -------------
------- -
----------------- ---------
-
-
-- --------- --
------------ -
------- ----- -- -- ---- ---- --
-
-- ---------- --
-------------- -
------- ----- -- -- ---- ---- --
----------------- ----------
------ ---------
-在上面的代码中，我们首先定义了一个 %btn placeholder，表示一个基本按钮的样式。然后，我们在 .btn-primary 和 .btn-secondary 选择器中使用了 @extend %btn，来继承这个样式。这样，它们就继承了 %btn 中的所有样式。同时，我们可以在它们自己的选择器中定义自己需要的样式，比如 .btn-secondary 中更换了按钮的背景色和字体颜色。
注意事项
在使用 @extend 指令时，有几个需要注意的地方。
- 不要滥用
@extend，尤其是在多级选择器中使用。如果过度使用@extend，可能会造成样式表特别复杂，影响样式表性能，也可能导致样式的可维护性变差。所以，只用在有必要的地方使用@extend。 - 避免在连通符类选择器中使用
@extend，这可能会导致样式表特别复杂和难以维护。建议使用占位符选择器（placeholder selector）来实现重用。 - 如果你在一个选择器中使用了
@extend，请保证扩展的选择器和被扩展的选择器属于同一个类或同一个属性。不同的元素可能会出现意外的样式，导致样式表失灵。
结论
在 SASS 中使用 @extend 指令可以让你的 CSS 样式更加灵活、易扩展、易阅读和易维护。它可以让你重用你的样式，并且可以避免出现样式的冗余，提高了样式表的性能。
使用 @extend 的时候要注意一些细节，比如不要滥用、避免在连通符类选择器中使用、保证被扩展和扩展的选择器属于同一个类或属性。希望这篇文章可以帮助你更好地使用 @extend 指令，写出更好的 SASS 和 CSS 样式表。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671851e9ad1e889fe22a0481