版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013253924/article/details/81036379
我们在css中定义子样式时，要从父节点一层一层的向内寻找，代码会很长，而且会有重复的代码。
比如：
.lesson2 div table{
border: 1px solid #ccc;
}
.lesson2 div table thead tr{
background-color:#ebebeb;
}
.lesson2 div table tobdy tr{
background-color:#e22020;
}
转换为sass的嵌套写法：
.lesson2{
div{
table{
border: 1px solid #ccc;
thead{
tr{
background-color:#ebebeb;
}
}
tbody{
tr{
background-color:#e22020;
}
}
}
}
}
你可以想象一个块一个块的，就像html嵌套一样的。
如果从sass代码向css代码推，
规则：遇到第一个html标签，就放在左面，往里，每遇到一个CSS选择器，就空格一下依次放在右边。遇到css就放好，没遇到就空着。
比如第一层
.lesson2{} 没有css
第二层
.lesson2 div{} 没有css
第三层
.lesson2 div table{
border: 1px solid #ccc; 有css
}
第四层
.lesson2 div table thead{} 没有css
.lesson2 div table tbody{} 没有css
第五层
.lesson2 div table thead tr{
background-color:#ebebeb; 有css
}
.lesson2 div table tbody tr{
background-color:#e22020; 有css
}
注意：遇到伪元素等情况，因为伪元素也是css选择器，就会空格一下，再放在右边，有时，解析出来的样式并不是你想要的。
比如我想要表格中每一行鼠标移动上去变背景色，使用伪元素就会出问题
.lesson2-demo2{
div{
table{
border: 1px solid #ccc;
thead{
tr{
background-color:#ebebeb;
}
}
tbody{
tr{
background-color:#ffffff;
:hover{
background-color: red;
}
}
}
}
}
}
实际上:hover这一行按照规则会被解析成
.lesson2-demo2 div table tbody tr :hover {
background-color: red;
}
我想要的是：
.lesson2-demo2 div table tbody tr:hover {
background-color: red;
}
看出区别了么？解析出来的tr后面多了一个空格
这段css代码的功能就相当于：
.lesson2-demo2 div table tbody tr td:hover {
background-color: red;
}
解决办法：前面加一个&号，这样就会直接替换，不会加空格
&符号还有另一个作用：
在它前面写的选择器，会被解析到&符号父级的前面，有点拗口，你可以直接下载我的例子来查看。
注意前面的选择器和&要有一个空格，可以试一下，没空格应该会编译失败
最后，这种嵌套也可以放在群组中，比如要实现
.lesson2-demo4 .group1 span,lesson2-demo4 .group2 span,lesson2-demo4 .group3 span{
color:blueviolet;
}
写成：
.lesson2-demo4{
.group1,.group2,.group3{
span{color: blueviolet}
}
}