@at-root和&的结合

&在Sass中所起的作用，文章开头就简单的进行演示了。在@at-root中也同样可以配合&一起使用，下面我们同样来看几个用例：

SCSS

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

CSS

.bar .foo {  color: gray; }

大家很容易发现，这个示例和不加@at-root的SCSS代码一样，可以编译出完全相同的代码：

.foo {    .bar & {        color:gray;    }}

同样的，&符和@at-root按下面的方式一起工作：

SCSS

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

CSS

.foo .bar {  color: gray; }

同样如此，这种方式与不加@at-root方式，运行的效果是一样的：

.foo {    & .bar {        color:gray;    }}

如此说明，在Sass中同时使用@at-root和&起到的作用是一样的，换句话说，这样并没有带来新的特性，而且在整个开发中还带来了额外的工作量。