SASS是一种CSS预处理器，它允许您以更快，更高效和更灵活的方式编写CSS。其中一个强大的功能是通过 "&" 能够引用父级选择器，这使得在嵌套结构中容易地为子元素应用上层样式。
引入SASS
要开始使用SASS，请确保在您的项目中安装了SASS。您可以使用命令行运行以下命令安装：
npm install sass
使用"&"
假设我们有如下HTML结构：
<div class="parent"> <div class="child">Hello</div> </div>
我们想将 .child 元素的背景颜色设置为其父元素 .parent 的背景颜色。在SASS中，可以使用“&”引用其实际的父级选择器，例如：
.parent {
background-color: red;
.child {
background-color: &; // 引用父级选择器
}
}编译后，CSS代码将如下所示：
.parent {
background-color: red;
}
.parent .child {
background-color: red; /* 父级选择器应用到子元素的结果 */
}如您所见，与手动输入 .parent 相比，使用 “&” 是非常简洁易懂的。
更复杂的选择器结构
在更复杂的SASS代码中，父级引用符号“&”可以用于非常嵌套的选择器结构。
例如：
-- -------------------- ---- -------
------- -
------ -----
-------- -
------ ----
------ -
----------------- -------
------- -
----------------- ------
-
-
-
-编译后，CSS代码将如下所示：
-- -------------------- ---- ------- ------- - ------ ----- - -------------- - ------ ---- - -------------- ------ - ----------------- ------- - -------------- ------------ - ----------------- ------ -
就像我们看到的一样，“&”符号灵活地适应于递归结构，方便您获得更具层次结构的CSS代码。
结论
在本文中，我们学习了使用SASS中的 "&" 符号来引用父级选择器。这使得通过嵌套结构更容易地为子元素应用上层样式，并帮助我们创建出更具层次结构和可读性的CSS。
如果您正在使用SASS，则应该掌握使用“&”的技巧并将其应用于您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d70f1ddd3a70eb6da64bf