一、SASS 继承的实现原理
SASS 的继承是基于 CSS 的选择器继承实现的。在 SASS 中，使用 @extend 进行继承，可以将一个选择器的样式继承到另一个选择器上，从而实现样式的复用。
继承的实现原理是通过生成一个新的选择器来实现的，这个新的选择器包含了继承的样式和被继承的选择器的样式，同时也继承了被继承的选择器的特性，比如伪类和伪元素。
例如：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ------- --- ----- ----- -------------- ---- - ------------ - ------- ----- ----------------- -------- ------ ----- -
在上面的代码中，.btn-primary 继承了 .btn 的样式，并且添加了自己的样式。在编译后的 CSS 中，.btn-primary 的样式就包含了 .btn 和 .btn-primary 的样式。
-- -------------------- ---- ------- ----- ------------ - -------- ------------- -------- ---- ----- ------- --- ----- ----- -------------- ---- - ------------ - ----------------- -------- ------ ----- -
二、SASS 继承的使用技巧
1. 继承公共样式
在编写 CSS 样式时，经常会出现多个选择器具有相同的样式，这时可以使用继承来实现样式的复用。
例如：
-- -------------------- ---- ------- ------ - ------ ---- ---------- ----- - -------- - ------ ------- ---------- ----- - -------- - ------ ------ ---------- ----- -
上面的代码中，.error、.warning 和 .success 三个选择器都具有相同的 font-size 样式，可以使用继承来避免重复的样式。
-- -------------------- ---- -------
-------- -
---------- -----
------- -
------- ---------
------ ----
-
--------- -
------- ---------
------ -------
-
--------- -
------- ---------
------ ------
-
-在上面的代码中，.message 选择器包含了 font-size 样式，.error、.warning 和 .success 选择器继承了 .message 的样式，并添加了自己的颜色样式。
2. 继承伪类和伪元素
在 SASS 中，继承也可以继承伪类和伪元素。
例如：
-- -------------------- ---- -------
---- -
-------- -------------
-------- ---- -----
------- --- ----- -----
-------------- ----
------- -
----------------- -----
-
--------- -
-------- ---
-------- ------
------ -----
------- -----
----------------- -----
-
-
------------ -
------- -----
----------------- --------
------ -----
------- -
----------------- --------
-
-在上面的代码中，.btn 选择器包含了 :hover 和 ::before 伪类和伪元素的样式，.btn-primary 继承了 .btn 的样式，并添加了自己的样式。
3. 继承多个选择器
在 SASS 中，一个选择器可以继承多个选择器的样式，只需要在 @extend 中使用逗号分隔多个选择器即可。
例如：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ------- --- ----- ----- -------------- ---- - ------------ - ------- ----- ----------- ----------------- -------- ------ ----- - ---------- - ---------- ----- -
在上面的代码中，.btn-primary 继承了 .btn 和 .btn-large 两个选择器的样式，并添加了自己的样式。
三、总结
SASS 的继承是基于 CSS 的选择器继承实现的，可以将一个选择器的样式继承到另一个选择器上，从而实现样式的复用。在使用继承时，需要注意继承的选择器和被继承的选择器之间的关系，以及继承公共样式、继承伪类和伪元素、继承多个选择器等技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506729195b1f8cacd252a5c