选择器嵌套
选择器嵌套可以简化后代选择器的书写,它允许我们将拥有相同父选择器的选择器写在一起。例如:
div {
width:100px;
height:200px;
.head{
height:50px;
background-color:red;
}
.content{
height:100px;
background-color:green;
}
.footer{
height:50px;
background-color:blue;
}
}
上面的编译后为以下形式:
div{
width:100px;
height:200px;
}
div .head{
height:50px;
background-color:red;
}
div .content{
height:100px;
background-color:green;
}
div .footer{
height:50px;
background-color:blue;
}
属性嵌套
在css
中有一些用 “ - ” 分隔的属性,它们往往都是中横线前半部分相同,而后半部分不同,书写起来会有重复。但是在sass
中我们可以使用属性嵌套来解决上述问题,具体使用如下:
div{
background:{
color:red;
size:100% 50%;
}
}
编译结果如下:
div{
background-color:red;
background-size:100% 50%;
}
父选择器引用 --- &
当我们想在选择器嵌套中引用父选择器的时候,可以使用 &
操作符。使用如下:
div{
height:100px;
width:100px;
.header{
height:50px;
& .top{ //这里的 & 表示 div .header
color:red;
}
}
}
编译结果如下:
div{
height:100px;
width:100px;
}
div .header{
height:50px;
}
div .header .top{
color:red;
}
@at-root跳出嵌套
顾名思义,使用@at-root
可以跳出当前的选择器嵌套。例如:
div{
height:100px;
color:blue;
@at-root .header{
background-color:black;
}
}
编译结果如下:
div{
height:100px;
color:blue;
}
.header{
background-color:black;
}
高级用法
默认@at-root
只会跳出选择器嵌套,而不能跳出@media
和@support
,如果要跳出这两种,则需要使用@at-root(without:...)
或@at-root(with:...)
。
-
@at-root(without:media support all rule)
:表示允许跳出哪些规则media
: 表示media
support
: 表示support
all
: 表示所有rule
: 表示常规css
规则 -
@at-root(with:media support all rule)
: 表示不允许跳出哪些规则