Sass ＠at-root （1）

在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..rc. (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;
}