什么是 SASS？
SASS 是一种 CSS 预处理器，它允许我们使用变量、嵌套规则、函数等等高级的 CSS 功能来编写更加模块化和易于维护的 CSS 代码。SASS 的主要作用是提高前端开发的效率和代码质量。
SASS 中的嵌套规则
SASS 中最常见的功能之一就是嵌套规则，它允许我们将相似的选择器写在一起，这样可以使我们的 CSS 代码更加简洁和易于理解。
-- -------------------- ---- -------
--- -
-- -
----------- -----
-
-- -
------ -----
- -
---------------- -----
-
-
-在上面的代码中，我们使用了 SASS 的嵌套规则来创建一个简单的导航菜单。使用这种方法可以让我们更清晰地指定 CSS 规则，使其更加易于维护。
SASS 嵌套规则引起的 bug
然而，使用嵌套规则时容易出现错误。例如，考虑以下代码：
-- -------------------- ---- -------
--- -
-- -
----------- -----
-
-- -
------ -----
- -
---------------- -----
-
-- -
-------- --
-- -
-------- -------------
-
-
-
-在这个例子中，我们使用了嵌套规则来创建一个嵌套的导航菜单。但是，这个代码有一个隐藏的问题 - 如果在 li 中嵌套了另一个 ul，则 display：inline-block 将应用于所有 li 元素，包括第一级导航菜单，而不仅仅是第二级菜单。
因此，即使我们只想在第二个层次上显示子菜单中的项目，也会在第一级菜单中错误地应用此规则。
解决方法
为了避免这种问题，我们需要在 SASS 中使用父级选择器（&）。
-- -------------------- ---- -------
--- -
-- -
----------- -----
-
-- -
------ -----
- -
---------------- -----
-
- - -
-------- --
-- -
-------- -------------
-
-
-
-在这里，我们使用 & & 来表示“在 li 中嵌套的 ul”，从而明确指定应用规则的元素。这避免了整个元素层次结构上应用该规则的问题。
结论
SASS 提供了许多有用的功能，例如嵌套规则和父级选择器，以帮助我们更有效地编写 CSS 代码。但是，必须注意隐含的问题和错误，以确保代码正确地执行。在编写 SASS 代码时使用父级选择器是避免在多层级嵌套规则中引起 bug 的一种方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f68335f55128102642b1a