5-sass选择器嵌套

一、后代选择器嵌套（&用法）

nav {
    $color: blue;
    a {
        color: $color;
        header & {
            color: $color;
        }
    }
}

生成的css就是：

nav a {
  color: blue;
}
header nav a {
  color: blue;
}

连体符&就是替代元素自身，上述的写法，&可以替换成 nav a {}，所以最后变成了header nav a {}，但假如a的标签放到和header & 同级则不同的效果，此时的&可以替换成nav{}，而不是nav a{}

nav {
    $color:blue;
    a {
        color:$color;
    }
    header & {
        color: $color;
    }
}

对应生成的css

nav a {
  color: blue;
}
header nav {
  color: blue;
}

二、多类选择器的嵌套（&用法）

.box.box1 {
  color: blue;
}

scss写法:

.box {
    color:pink;
    &.box1 {
        color:blue;
    }
}

这里需要特别的注意，&和相连的类名之间不能有任何的空格，不然就会变成CSS选择器中的后代选择器：

.box{
    & .box1{
        color: green;
    }
}

编译出来的CSS就成了：

.box .box1{
  color: green; 
}

当然对应的写法还有就是直接嵌套：

.mod {
    .on {
       color: green;
    }
}

连体符&，如果是在选择器的后边，是有空格的写法 类似header &（后代选择器）；如果是在选择器前边，分为两种情况：1.如果&.box1等于 .box.box1（多类选择器）；2.如果是& .box1等同于.box .box1（后代选择器）