选择器嵌套

目录

• 选择器嵌套
• 属性嵌套
• 父选择器引用 --- &
• @at-root跳出嵌套
  • 高级用法

选择器嵌套

选择器嵌套可以简化后代选择器的书写，它允许我们将拥有相同父选择器的选择器写在一起。例如：

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) : 表示不允许跳出哪些规则