Sass ＠at-root （2）

@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和&起到的作用是一样的，换句话说，这样并没有带来新的特性，而且在整个开发中还带来了额外的工作量。

Sass ＠at-root （2）,布布扣,bubuko.com