我们在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}
}
}