CSS DP（Duplicate Properties）是指在CSS样式表中重复编写相同的CSS属性和值，造成样式表冗余和效率低下的问题。SASS @extend 可以帮助我们避免 CSS DP 问题，提高样式表的效率和可维护性。
什么是SASS @extend？
SASS（Syntactically AWesome StyleSheets）是一种CSS预处理器，提供了一些类似编程语言的特性，比如变量、函数、循环、条件等等，可以更方便地编写CSS代码。@extend是SASS中的一个关键字，用于实现CSS规则的继承。
如何使用SASS @extend？
我们可以定义一个CSS规则，并将它声明为可继承的，例如：
-- -------------------- ---- ------- ------- - -------- ------------- -------- --- ----- ---------- ----- ------------ ------- ------------ ----------- ----------- ------- ------------ ------- --------------- ------- ------- -------- ------- --- ----- ----- -------------- ---- ----------------- ----- ------ ----- -
在上面的代码中，我们使用了SASS的占位符语法（%button）定义了一个可继承的按钮样式，这个样式中包含了常见的按钮属性。
然后，我们可以通过@extend关键字，将一个选择器继承这个按钮样式，例如：
-- -------------------- ---- -------
--------------- -
------- --------
------------- --------
------ -----
----------------- --------
------- -
----------------- --------
------------- --------
------ -----
-
-在上面的代码中，我们使用了@extend关键字将.button-primary选择器继承了%button占位符，这样.button-primary就可以拥有了%button中的所有属性，同时也可以添加额外的属性，如border-color、color和background-color。
值得注意的是：选择器继承只能继承一个父选择器的样式，如下面的代码会报错：
-- -------------------- ---- ------- ---- - -------- --- ----- ---------- ----- ------------ ------- ------------ ----------- ----------- ------- ------------ ------- --------------- ------- ------- -------- ------- --- ----- ----- -------------- ---- ----------------- ----- ------ ----- - --------- - ------- ----- - --------- - ------- ----- -
.btn-form和.btn-blue选择器会继承%btn占位符的所有样式，但是生成的CSS代码会包含两份完全相同的.btn样式，造成CSS DP问题。
SASS @extend的注意事项
虽然SASS @extend有助于我们避免CSS DP问题，但是在实际的开发中还需注意一些细节和限制：
- @extend只能继承选择器中的样式，不能继承属性值；
- 继承的样式会融合到当前选择器中，有可能影响其他选择器，造成样式污染；
- 被继承的选择器必须在当前选择器之前定义，否则样式没有继承效果；
- 继承关系不能跨越@at-rule（如@media）或其他选择器（如&:hover）。
示例代码
下面是一个使用SASS @extend实现按钮样式的例子：
<button class="btn-primary">Primary Button</button> <button class="btn-success">Success Button</button> <button class="btn-warning">Warning Button</button>
-- -------------------- ---- -------
-- -------
------- -
-------- -------------
-------- --- -----
---------- -----
------------ -------
------------ -----------
----------- -------
------------ -------
--------------- -------
------- --------
------- --- ----- -----
-------------- ----
----------------- -----
------ -----
-
-- ----
------------ -
------- --------
------------- --------
------ -----
----------------- --------
------- -
----------------- --------
------------- --------
------ -----
-
-
-- ----
------------ -
------- --------
------------- --------
------ -----
----------------- --------
------- -
----------------- --------
------------- --------
------ -----
-
-
-- ----
------------ -
------- --------
------------- --------
------ -----
----------------- --------
------- -
----------------- --------
------------- --------
------ -----
-
-总结
SASS @extend是一种优秀的CSS规则继承方式，可以避免CSS DP问题，提高样式表的效率和可维护性。但是在使用时还需注意细节和限制，避免样式污染和继承关系错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf7c84b5eee0b5256c3d2b