在前端开发中，CSS 的样式表往往难以维护和重用。为了解决这个问题，SASS 提供了 @extend 继承选择器的功能，可以大大简化代码，并使用少量的 CSS 样式表达式创建灵活的样式。
@extend 的基本语法
SASS 的 @extend 继承选择器语法基于 SassScript 的函数调用语法。当需要从已有的 CSS 类继承某个或某些属性时，可以使用 @extend 选择器。例如：
-- -------------------- ---- -------
-------- -
----------------- -----
------- --- ----- -----
-------- -----
-
----- -
------- ---------
------- - -----
------ ------
-上面的示例中，.page 类从 .content 类继承了其属性，最终生成的 CSS 如下：
-- -------------------- ---- -------
--------- ----- -
----------------- -----
------- --- ----- -----
-------- -----
-
----- -
------- - -----
------ ------
-继承使用的注意事项
选择器优先级
在使用 @extend 时，要注意选择器的优先级。@extend 的选择器不仅会继承其父级的属性，还会继承其选择器的优先级。如果父级选择器的优先级高于子级选择器的优先级，则 @extend 不会起作用。
例如：
-- -------------------- ---- -------
-------- -
----------------- -----
-------- -----
-
----- -
------- ---------
----------------- -----
-
-------- -
------ -----
-最终生成的 CSS 是这样的：
-- -------------------- ---- -------
--------- ----- -
----------------- -----
-------- -----
-
----- -
----------------- -----
------ -----
-只继承部分属性
有时候，只需要继承选择器中的部分属性，而不是全部属性。可以使用关键字 % 定义一个占位符选择器，并将其与实际的选择器 @extend。
例如：
-- -------------------- ---- -------
-------- -
----------------- -----
------- --- ----- -----
-------- -----
-
----- -
------- ---------
------- - -----
------ ------
-
-------- -
------- ---------
------------ -----
-最终生成的 CSS 如下：
-- -------------------- ---- -------
------ -------- -
----------------- -----
------- --- ----- -----
-------- -----
-
----- -
------- - -----
------ ------
-
-------- -
------------ -----
-避免重复定义
使用 @extend 时，要避免重复定义选择器，否则可能会产生意想不到的后果。
例如：
-- -------------------- ---- -------
-------- -
----------------- -----
-------- -----
-
----- -
------- ---------
----------------- -----
-
-------- -
------ -----
-
----- -
------- ---------
-上面的代码中，.content 和 .page 均继承了 .content 的样式属性，实际上相当于将 .page 重复继承了一次，最终生成的 CSS 如下：
-- -------------------- ---- -------
--------- ----- -
----------------- -----
-------- -----
------ -----
-
----- -
----------------- -----
-支持动态选择器
使用 @extend 时，可以使用动态选择器。
例如：
-- -------------------- ---- -------
------- -
-------- --- -----
----------------- --------------------- ------
-
------------ -
------- --------
------ ------
------- -
----------------- --------
----------------- -----
-
-
----------- -
------- --------
------ ------
------- -
----------------- --------
----------------- -----
-
-总结
使用 @extend 继承选择器可以大大简化代码，使用少量的 CSS 样式表达式创建灵活的样式。但是在使用的时候需要注意选择器优先级、只继承部分属性、避免重复定义以及支持动态选择器等方面，才能发挥 @extend 继承的最大优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65499d597d4982a6eb3d3331