CSS 层级作用是指，当多个选择器作用于同一个元素时，浏览器根据选择器的优先级来确定该元素应用哪个样式。SASS 是一种 CSS 预处理器，可以简化 CSS 的编写和维护，同时也提供了一些机制来实现 CSS 层级作用。
本文将详细介绍如何在 SASS 中实现 CSS 层级作用。
嵌套规则
SASS 支持使用嵌套规则来描述 CSS 的层级关系。具体地，可以把子选择器写在父选择器的后面，形成一个嵌套结构。例如：
------- -
------ ----
------ -
---------- -----
-
-上面的代码定义了一个 .parent 类，它包含一个子类 .child，.child 类的样式只有在它被 .parent 修饰的元素内生效。输出的 CSS 代码如下：
------- - ------ ---- - ------- ------ - ---------- ----- -
可以看到，嵌套规则实现了 CSS 的层级关系，并且生成的 CSS 代码也符合 CSS 的选择器优先级规则。
需要注意的是，嵌套规则容易造成 CSS 的层级过深，这会影响样式的继承和覆盖。应该根据实际情况合理使用嵌套规则，避免出现过深的层级关系。
父选择器的引用
除了简单的嵌套规则外，SASS 还提供了一种可以引用父选择器的方法，这样可以更加灵活地控制 CSS 的层级关系。
父选择器可以通过 & 符号来引用。例如：
------- -
------ ----
------- -
------ -----
-
-上面的代码定义了一个 .parent 类，当鼠标悬停在 .parent 修饰的元素上时，.parent 的文本颜色会变成蓝色。
这里使用了 & 符号来引用 .parent 选择器，使得 :hover 伪类成为了 .parent 的后代选择器。如果直接写成 .parent:hover，则会变成 .parent 的同级选择器，并且优先级也会不同。
同时，可以通过 & 符号来实现嵌套结构的改变，例如：
------- -
------ ----
------ -
---------- -----
------- -
------ -----
-
-
-上面的代码定义了一个 .parent 类，它包含一个子类 .child。当鼠标悬停在 .child 修饰的元素上时，.child 的文本颜色会变成蓝色。
总之，父选择器的引用可以使得 CSS 样式更加灵活和精确。
类的继承
另一种实现 CSS 层级作用的方法是类的继承。在 SASS 中，可以使用 @extend 关键字来实现类的继承，例如：
------- - ------ ---- - ------ - ------- -------- ---------- ----- -
上面的代码定义了一个 .parent 类，它的样式被继承到了 .child 类中，同时 .child 也具有自己的样式。这样，.child 的样式也包含了.parent 的样式，实现了 CSS 的层级作用。输出的 CSS 代码如下：
-------- ------ - ------ ---- - ------ - ---------- ----- -
需要注意的是，类的继承会造成 CSS 的冗余，如果继承的类比较多，生成的 CSS 代码会比较冗长。同时还有可能出现样式的覆盖和继承链过长的情况，应该根据实际情况合理使用继承。
示例代码
下面给出一个完整的示例代码：
-- ------
------- -
------ ----
-------- -
------ -----
-
-
-- ------
------ -
------- --------
---------- -----
------- -
------ ------
-
-
-- -------
------------ -
------ - -
------ -----
-
-上面的代码定义了三个类，它们之间包含了嵌套结构、父选择器的引用和类的继承，以及后代选择器的使用。输出的 CSS 代码如下：
-------- ------ - ------ ---- - --------------- ------------- - ------ ----- - ------ - ---------- ----- - ------------ - ------ ------ - ------ ------------ - ------ ----- -
可以看到，SASS 中的层级关系实现了 CSS 的层级作用，并且输出的 CSS 代码也符合 CSS 的选择器优先级规则。
结论
本文介绍了如何在 SASS 中实现 CSS 层级作用，包括嵌套规则、父选择器的引用和类的继承。需要根据实际情况合理使用这些机制，避免出现层级过深、冗余代码和继承链过长等问题。同时还应该注意样式的继承和覆盖，使得 CSS 文件具有良好的可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670b738cd91dce0dc88aad2c