scss中@at-root的使用

SCSS中的@at-root可以用来放弃当前的嵌套层级，让其内部的CSS规则到根部。比如我们通常会这样使用SCSS的嵌套

.bar {
    .foo {
        color: red
    }
}

编译出来的css为

.bar .foo {
    color: red
}

但是如果我们这里使用@at-root，那编译出来的效果就不一样了

.bar {
    @at-root .foo {
        color: red;
    }
}

编译出来就是

.bar {}
.foo {
    color: red;
}

这个规则经常使用在CSS的BEM命名规范中

.header {
    width: 100px;
    @at-root &__button {
        background: red;
        
        @at-root &--primary {
            color: white;
        }
    }
}

编译出来就是

.header {
  width: 100px;
}
.header__button {
  background: red;
}
.header__button--primary {
  color: white;
}