背景
在前端开发中，CSS 的编写往往是最为繁琐的任务之一。传统的 CSS 样式写法很难对各个元素进行规范化的控制，因此 Sass 这样的 CSS 预编译器应运而生。使用 Sass，我们可以大幅度提高 CSS 的编写效率，而且还能够避免一些常见的错误。
然而，Sass 也有自己的规范，特别是对于多层嵌套代码的规范化要求，更是需要我们注意。
在 Sass 中，我们可以使用嵌套语法来表达 CSS 样式之间的关系。多层嵌套似乎是一种比较常见的语法，但是如果没有一些规范化的要求，多层嵌套可能会使样式变得混乱且难以维护。
为了规范化多层嵌套代码的编写，Sass 提出了一些规范化的要求。其中比较重要的要求如下：
1. 最多只能嵌套三层
在 Sass 中，最多只能嵌套三层代码。如果一段 Sass 代码中嵌套了更多层的代码，那么这段代码就会变得难以维护。
以下是一个违反这个规范的示例代码：
-- -------------------- ---- -------
---- -
-- -
-- -
- -
------ ----
------- -
------ ------
-
-
-
-
-如果代码需要嵌套更多层，则可以考虑使用 @extend、@include 等方式来实现。
2. 不要在代码块内声明属性
不要在代码块内声明属性，这样会增加代码的复杂性，使得代码难以理解和维护。
以下是一个违反这个规范的示例代码：
-- -------------------- ---- -------
---- -
-- -
-- -
- -
------- -
------ ------
------------ ----- -- -------- --
-
-
-
-
-这里的解决方案是使用多个嵌套块：
-- -------------------- ---- -------
---- -
-- -
-- -
- -
------- -
------ ------
-
------- ------ -
------------ -----
-
-
-
-
-3. 不要使用通用选择器
通用选择器（*）是非常消耗性能的选择器，因此我们应该尽量避免使用它，特别是在多层嵌套的代码中。
以下是一个违反这个规范的示例代码：
-- -------------------- ---- -------
---- -
- -
-------- --
------- --
-
-- -
-- -
- -
------ ----
-
-
-
-这里的解决方案是使用更加精确的选择器：
-- -------------------- ---- -------
---- -
-------- --
------- --
-- -
-- -
- -
------ ----
-
-
-
-总结
在 Sass 中，多层嵌套是一种非常重要的语法，但是如果没有规范化的编写方式，可能会对代码的健壮性和维护性造成不小的影响。因此，在编写多层嵌套代码时，我们需要遵循一些规范化的要求，如最多只能嵌套三层、不要在代码块内声明属性以及不要使用通用选择器。这样可以帮助我们更好地管理 Sass 代码，提高代码质量和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa5ebe48841e989468b07f