在前端开发中，CSS 的编写是我们不可避免的工作之一。而 Sass 作为一个 CSS 预处理器，可以大大提高我们的工作效率。其中，选择器嵌套是 Sass 具有的强大特性之一。
Sass 中的选择器嵌套
Sass 中选择器嵌套是一种将子选择器嵌套在父选择器中的方式，使得我们可以更加方便地操作 CSS。
举个例子，我们常见的 CSS 代码可能是这样的：
-- -------------------- ---- ------- ---------- - ----------------- ----- - ---------- ------ - ---------- ----- - ---------- -------- - -------- ----- -
而在 Sass 中，我们可以使用选择器嵌套来优化这段代码：
-- -------------------- ---- -------
---------- -
----------------- -----
------ -
---------- -----
-
-------- -
-------- -----
-
-上面这段 Sass 代码可以转换为与第一段 CSS 代码相同的效果。但是，使用 Sass 中的选择器嵌套不仅可以使代码更加简洁，还有许多使用技巧。
Sass 中选择器嵌套的使用技巧
& 符号
在 Sass 中，& 符号表示父选择器。通过在子选择器前添加 &，可以实现更加精准的选择器嵌套。例如：
.container {
background-color: #fff;
&:hover {
background-color: #f0f0f0;
}
}这样，当 .container 被鼠标悬停时，背景颜色会变成 #f0f0f0。
多层嵌套
在 Sass 中，可以进行多层嵌套。例如：
-- -------------------- ---- -------
---------- -
----------------- -----
------ -
---------- -----
---------- -
------------ -----
-
-
-这样，.sub-title 会被嵌套在 .title 中，在 CSS 中将会生成这样的代码：
.container .title {
font-size: 20px;
}
.container .title .sub-title {
font-weight: bold;
}选择器的重复使用
在 Sass 中，选择器可以被多次使用。例如：
-- -------------------- ---- ------- ---- - ----------------- ----- ------- --- ----- ----- -------- ----- - ------------ - ------- ----- ----------------- ----- ------ ----- -
在上面的代码中，.btn-primary 使用了 @extend 指令继承了 .btn 的样式。这样，.btn-primary 既有 .btn 的样式，又有自己独特的样式，代码更加简洁易懂。
总结
通过选择器嵌套，我们可以更加方便地操作 CSS，使得代码更加简洁。在 Sass 中选择器嵌套还有许多使用技巧，例如 & 符号、多层嵌套、选择器的重复使用等。通过学习这些技巧，我们可以更加高效地使用 Sass，提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647713e0968c7c53b03a4482