共计 1340 个字符，预计需要花费 4 分钟才能阅读完成。
本节咱们学习 Sass 中的嵌套，嵌套大家应该不生疏，在 HTML 中就反对标签的嵌套。Sass 中容许一个 CSS 款式嵌套进另一个款式中，内层款式仅实用于外层款式的选择器范畴内。
示例：
例如上面这段 CSS 代码：
.big {color: #ccc;}
.big .small {font-size: 14px;} 如果咱们要应用 Sass 中的嵌套语法来写，如下所示：
image
从上图咱们能够看到，嵌套的语法其实很简略，相较于 CSS 语言中后辈选择器的写法，嵌套规定看起来要直观很多。
应用 Sass 嵌套来写代码，能够缩小父类选择器的反复，不过须要留神的是，咱们最好不要嵌套太多层选择器，因为嵌套层数越多性能越低。个别咱们在理论利用中，嵌套三层左右就差不多啦。
援用父选择器 &
在嵌套 CSS 规定时，有时候咱们须要间接应用到嵌套外层的父选择器，比方当给某一个元素设定 hover 款式时或者是当 body 元素有个 classname 时，能够用 & 符号来示意嵌套规定外层的父选择器。
示例：
例如上面这段代码：
a {
color: #ccc;
font-size: 12px;
}
a:hover {color: #000;} 咱们能够这样写：
image
上图中 & 符号被解析为选择器 a，即父选择器。个别 & 符号是呈现在选择器的后面地位，例如上述代码中的 &:hover。
除此之外，咱们也能够在 & 符号前面增加一些后缀，示意在父选择器名称的根底上组合成新的选择器名称。
示例：
例如上面这段代码中，选择器名称的前缀都一样：
.top {background-color: #ccc;}
.top-div {font-size: 14px;}
.top-p {color: #000;}
.top-p__span {font-size: 12px;} 那咱们就能够将这些前缀都应用 & 代替：
image
嵌套属性
许多 CSS 属性具备雷同的前缀，例如 font-family 和 font-size、font-weight、font-style 等，这些属性遵循雷同的命名空间，即 font。为了便于管理这样的属性，同时也为了防止反复输出，Sass 容许将属性嵌套在命名空间中。要实现属性的嵌套，只须要在命名空间前面加上一个冒号 : 即可。
示例：
咱们来看一个例子：
.top {
font-size: 14px;
font-weight: bold;
font-style: normal;
} 例如下面这段代码中，如果咱们应用 Sass 来写，只须要在 .top 选择器中，在 font 命名空间前面加上一个 : 冒号，而后将其余属性应用花括号括起来，外面的属性就能够不必写 font- 前缀局部了。如下图：
image
占位符选择器 %foo
Sass 额定提供了一种非凡类型的选择器，叫做占位符选择器 (placeholder selector)，它与罕用的 id 与 class 选择器写法类似，只是将 # 或 . 替换成了百分号 %，而后通过 @extend 来应用。如果不应用 @extend 指令，则无奈在 CSS 中显示后果。
示例：
%xkd{color: #000;}
.box{
@extend %xkd;
font-size:14px;
} 编译成 CSS 代码：
.box {color: #000;}
.box {font-size: 14px;} 上述代码中，@extend 指令容许一个选择器继承另一个选择器中的款式。