在本节中，我们将了解Sass中的嵌套。您应该熟悉嵌套。HTML支持标签嵌套。Sass允许一种CSS样式嵌套在另一种样式中，内部样式只适用于外部样式的选择器范围内。例子：比如下面的CSS代码：.big{color:#ccc;}.big.small{font-size:14px;}如果我们要使用Sass中的嵌套语法来写，如下图：imagefrom上图我们可以看到，嵌套语法其实很简单。与CSS语言中后代选择器的写法相比，嵌套规则看起来直观多了。使用Sass嵌套来写代码可以减少父类选择器的重复，但是需要注意的是我们最好不要嵌套太多的选择器层，因为嵌套层数越多性能越低。一般在实际应用中，嵌套三层左右就差不多了。引用父选择器&在嵌套CSS规则时，有时我们需要在嵌套的最外层直接使用父选择器，例如为元素设置hover样式时，或者当body元素有classname时，可以使用&表示嵌套规则外层父选择器的符号。例子：比如下面的代码：a{color:#ccc;font-size:12px;}a:hover{color:#000;}我们可以这样写：将上图中的&符号解析为选择器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-样式等。这些属性遵循相同的名称空间，即字体。为了便于管理此类属性，同时也为了避免重复输入，Sass允许将属性嵌套在命名空间中。要实现属性的嵌套，只需在命名空间后添加一个冒号:即可。例子：我们来看一个例子：.top{font-size:14px;字体粗细：粗体；font-style:normal;}比如上面的代码，如果我们使用Sass来写，只需要选择在.top浏览器中，在font命名空间后面加一个冒号，然后把其他属性用花括号括起来,这样里面的属性就不用写font-前缀部分了。如下图所示：图像占位符选择器%fooSass额外提供了一种特殊类型的选择器，称为占位符选择器（placeholderselector），它类似于常用的id和class选择器，只是多了#或.替换为百分号%，然后由@extend使用。如果不使用@extend指令，则无法在CSS中显示结果。示例：%xkd{颜色：#000;}.box{@extend%xkd;font-size:14px;}编译成CSS代码：.box{color:#000;}.box{font-size:14px;}在上面的代码中，@extend指令允许一个选择器从另一个选择器继承样式。
