在SassConf大会上，给我们传递了Sass3.3的新特性。这些新特性有很多意义，特别是@at-root指令，这让你的代码会得更佳清洁。
今天我们主要一起来了解Sass中的@at-root特性的使用规范。
在具体了解@at-root规范之间，我们先来回忆Sass的嵌套功能。简单的来看一个示例。在我们的CSS中常见有这样的一段代码：
.foo {
color:green;
}
.foo .bar {
color:gray;
}
回到Sass中，实现上面的样式，我们可以使用Sass的嵌套来完成：
.foo {
color: green;
.bar {
color: gray;
}
}
除了上面的方法之外，还可以通过连体符&来实现：
.foo {
color: green;
& .bar {
color: gray;
}
}
如若简单实现:
.foo .bar {
color: gray;
}
还可以使用另外一种特殊方式来实现：
.bar {
.foo & {
color: gray;
}
}
在我们CSS中有一种命名方式是BEM,如：
.block {}
.block__element{}
.block--modifier{}
试想我们在Sass中是否可以通过下面的方式来实现上面样式代码：
#{&}_element{}
不仿我们来验证一下：
.block {
color: red;
#{&}__element {
color:blue;
}
#{&}--modifier {
color: orange;
}
}
悲催的是，编译出来的CSS并不是我们想要的代码：
.block {
color: red; }
.block .block__element {
color: blue; }
.block .block--modifier {
color: orange; }
但在LESS和Stylus中，能很好的实现BEM类名的形式。此时在想，在Sass中有没有这样的功能呢？值得幸运的是，在Sass3.3中新增加了@at-root特性,能实现上面BEM的特性：
.block {
color: red;
@at-root #{&}__element {
color: blue;
}
@at-root #{&}--modifier {
color:orange;
}
}
@at-root特性
前而的例子告诉我们@at-root是什么。通过他可以告诉Sass，你不想嵌套选择器。当使用&选择器时，就算你不想嵌套选择器，Sass也会自动嵌套。但往往很多时候，我们是不想要嵌套选择器，例如BEM。使用@at-root和#{&}可以引用父（在Sass中总是引用父选择器）和插值，可以嵌套，做一些其他的事情。接下来，我们通过一些实例来说明@at-root的特性。
@at-root运行环境
@at-root是Sass的新特性。要想能正常的运行@at-root，首先需要先安装Sass的全新版本：只要确保你的电脑上已经安装了Ruby，你可以直接打开终端命令运行下面的命令安装Sass：
$ gem install sass --pre
如果你无法确认，你以前安装的Sass是不是最新版本，你可以通过：
$ sass -v
显示的版本信息：
Sass 3.3.0.rc.2 (Maptastic Maple)
如果不是，你可以使用下面的命令更新Sass:
$ gem update sass
注意，如果你的系统是刚升级到OS X 10.9 Mavericks，你得重新更新Command Line Tools:
$ xcode-select --install
重启您的终端命令，重新执行上面的命令就可以获取最新版本的Sass。请注意，这是一个未发表的版本，因为它还在开发中，但现在玩一点都不受影响，还可以体验Sass中新增加的一些特性。
“Ben Frain在The things I want from Sass aren’t the things I thought I wanted一文中也详细的描述了Sass中新增的特性，如：Source Maps。”
@at-root规范
@at-root使用规范是如何工作，这里我们通过一些测试用例来做说明：
内联选择器模式
SCSS
.foo {
@at-root .bar {
color:gray;
}
}
CSS
.bar {
color: gray;
}
测试用例可以说明，@at-root的内联选择器模式，将不会让你的选择器发生任何的嵌套，直接移除了父选择。在来看一个嵌套深一点的用例：
SCSS
.foo {
@at-root .bar {
color: gray;
@at-root button{
color:red;
@at-root span {
color: orange;
}
}
}
}
CSS
.bar {
color: gray;
}
button {
color: red;
}
span {
color: orange;
}
在SCSS中嵌套，使用@at-root内联选择器模式，编译出来的CSS无任何嵌套，让代码更加的简单。回到SCSS中的嵌套中，如果不使用@at-root内联选择器模式，将会按代码的层级关系一层一层往下嵌套。如上例，将用例中的@at-root去掉之后，将会编译出像下面的CSS代码（了解过Sass）的同学，一点都不会觉得奇怪。
.foo .bar {
color: gray;
}
.foo .bar button {
color: red;
}
.foo .bar button span {
color: orange;
}
Sass ＠at-root （1）,布布扣,bubuko.com