@at-root和#{&}结合

Sass有脚本模式#{}，他和&不同之处是，&只用作选择器，它只能出现在一个复合的开始选择器，类似于一个类型选择器，如a或者h1。但#{}他表示的是一个插值，它可以用在任何地方。同样的，当@at-root和#{&}一起使用时，可以给我们的开发带来极大的方便与优势。例如：

SCSS

.foo {
    @at-root .bar #{&} {
        color: gray;
    }
}

CSS

.bar .foo {
  color: gray;
}

可能会让你感到意外与失望，因为你从上面的代码之中并没有看到他有特别之处。或者说能帮你减少什么？也不能帮你优化什么？不过不用太心急，接着往下看。

先快速回忆一下BEM,如：

.block {} //Block
.block__element{} //Element
.block--modifier{} //Modifier

此时使用@at-root就能尽显其英雄本色：

SCSS

.block {
    color:red;

    @at-root #{&}__element{
        color:green;
    }

    @at-root #{&}--modifier {
        color:blue;
    }
}

CSS

.block {
  color: red;
}
.block__element {
  color: green;
}
.block--modifier {
  color: blue;
}

到了这里，你是否体会到@at-root在BEM中是具有多大的优势了吧。不急，后面将来个实例，让你一览其整个过程。