Sass有脚本模式#{}，他和&不同之处是，&只用作选择器，它只能出现在一个复合的开始选择器，类似于一个类型选择器，如a或者h1。但#{}他表示的是一个插值，它可以用在任何地方。同样的，当@at-root和#{&}一起使用时，可以给我们的开发带来极大的方便与优势。例如：
.foo { @at-root .bar #{&} { color: gray; } }
.bar .foo {
color: gray;
}
可能会让你感到意外与失望，因为你从上面的代码之中并没有看到他有特别之处。或者说能帮你减少什么？也不能帮你优化什么？不过不用太心急，接着往下看。
先快速回忆一下BEM,如：
.block {} //Block
.block__element{} //Element
.block--modifier{} //Modifier
此时使用@at-root就能尽显其英雄本色：
.block { color:red; @at-root #{&}__element{ color:green; } @at-root #{&}--modifier { color:blue; } }
.block { color: red; } .block__element { color: green; } .block--modifier { color: blue; }
到了这里，你是否体会到@at-root在BEM中是具有多大的优势了吧。不急，后面将来个实例，让你一览其整个过程。
@at-root和#{&}结合,布布扣,bubuko.com
原文：http://www.cnblogs.com/aobingyan/p/3809093.html