在使用 SASS 进行样式预处理时，嵌套规则和子选择器是两个非常基本和常见的功能。然而，对于一些前端初学者来说，这两个功能可能容易混淆，因此本文将详细介绍 SASS 嵌套规则和子选择器的区别以及如何正确地使用它们。
SASS 嵌套规则
SASS 嵌套规则是指将 CSS 样式规则嵌套在另一个 CSS 样式规则中的写法。这样就可以避免在 HTML 中使用大量的类名，让样式表更加具有结构性和语义化。
示例代码：
-- -------------------- ---- -------
-- --- ----
--- -
----------------- -----
-- -
----------- -----
-- -
-------- -------------
- -
------ -----
-
-
-
-
-- ---- --- --
----
----------------- -----
-
--- -- -
----------- -----
-
--- -- -- -
-------- -------------
-
--- -- -- - -
------ -----
-上面的代码将 nav、ul、li 和 a 元素的样式规则进行了嵌套，使得样式表更加结构化。
子选择器
子选择器是 CSS 选择器中的一种，它使用 > 符号表示，可以选择某个元素的直接子元素（仅仅是下一级的儿子元素，非孙子元素）。这种选择器是为了避免样式应用到不想应用的元素上。
示例代码：
-- -------------------- ---- ------- -- --- ---- --- - -- - -- - - - ------ ----- - -- ---- --- -- --- - -- - -- - - - ------ ----- -
上面的代码利用了子选择器选择了 nav 元素下的 ul 元素，ul 元素下的 li 元素，以及 li 元素下的 a 元素，这样就能够准确地选择到需要样式的元素上面。
嵌套规则和子选择器的区别
SASS 的嵌套规则和子选择器都可以选择某个元素的子元素，那么它们之间有什么区别呢？
- 嵌套规则是嵌套在父元素中的样式，不一定需要选择器，例如上面的示例代码中的
ul和li标签。 - 子选择器是针对某个选择器下的所有匹配元素中的直接子元素的样式，它是一种 CSS 选择器。因此，子选择器只能跨越一级元素，不能选择多级元素。
综上所述，我们可以得出结论：在 SASS 中，嵌套规则和子选择器都可以使 CSS 更加优雅和灵活。合理使用两者之间的区别，可以帮助我们更加规范地编写 CSS 样式表，并且更加方便后期维护。
注意事项：
- 使用 Sass 的同学在开发中尽量避免编写太多嵌套层级。过多的嵌套会增加代码的体积和复杂度
- 子选择器一般情况下用的不多,除非你需要在子元素里添加默认样式
- 可以在需要元素灵活操作的时候使用嵌套规则
总结：Sass的嵌套规则和子选择器是非常基本和常见的功能。掌握两者的区别，才是学习 Sass 的第一步。在使用 Sass 编写 CSS 样式表时，发挥它们的优劣势，可以使 CSS 更具有语义化，避免样式冗余，并且增加可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64901ce448841e9894e47bc1