Sass＠at-root

在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; 
}

@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;
    }
}

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

CSS

.foo .bar {
  color: gray; 
}

.foo.bar {
  color: gray; 
}

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

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

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

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

@at-root和#{&}结合

Sass有脚本模式#{}，他和&不同之处是，&只用作选择器，它只能出现在一个复合的开始选择器，类似于一个类型选择器，如a或者h1。但#{}他表示的是一个插值，它可以用在任何地方。同样的，当@at-root和#{&}一起使用时，可以给我们的开发带来极大的方便与优势。例如：

SCSS

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

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

CSS

.bar .foo {
  color: gray; 
}

.foo .bar {
  color: gray; 
}

.foo.bar {
  color: gray; 
}

可能会让你感到意外与失望，因为你从上面的代码之中并没有看到他有特别之处。或者说能帮你减少什么？也不能帮你优化什么？不过不用太心急，接着往下看。

先快速回忆一下BEM,如：

.block {} //Block
.block__element{} //Element
.block--modifier{} //Modifier

此时使用@at-root就能尽显其英雄本色：

SCSS

.block {
    color:red;

    @at-root #{&}__element{
        color:green;
    }

    @at-root #{&}--modifier {
        color:blue;
    }
}

CSS

.block {
  color: red; 
}
.block__element {
  color: green; 
}
.block--modifier {
  color: blue; 
}

到了这里，你是否体会到@at-root在BEM中是具有多大的优势了吧。不急，后面将来个实例，让你一览其整个过程。

@at-root区块处理方式

@at-root还具有区块处理的方式，可以将其内容以下面的方式进行嵌套：

.block {
    @at-root {
        #{&}__element{...}
        #{&}--modifier{...}
    }
}

但在具体的使用过程中，有一些细节需要处理。先来看一个简单的示例：

SCSS

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

CSS

.bar .foo {
  color: gray; 
}

从运行效果上可以看出，和不按区块显示效果是一致的。

在@at-root的块嵌套中，只会影响最近的子选择器，如：

SCSS

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

            @at-root {
                .baz {
                    .bac {
                        color: green;
                    }// .baz .bac {color:green;}
                }
            }
        }

        @at-root {
            .baz {
                .bac {
                    color: red;
                }//.baz .bac {color:red;}
            }
        }
    }
}


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

            @at-root {
                .baz #{&}{
                    .bac {
                        color: green;
                    }//.bar .bar .foo .bac {color:green;}
                }
            }
        }

        @at-root {
            .baz #{&}{
                .bac {
                    color: red;
                }//.baz .foo .bac{color:red;}
            }
        }
    }
}

CSS

.bar .baz {
  color: gray; 
}
.baz .bac {
  color: green; 
}
.baz .bac {
  color: red; 
}

.bar .foo .baz {
  color: gray; 
}
.baz .bar .foo .bac {
  color: green; 
}
.baz .foo .bac {
  color: red; 
}

这里有一个细节要特别注意，在使用@at-root块时，引用#{&}会略有不同。

@at-root和with或without

在@at-root中无法自动移除默认的指令，如@media或者@supports,先来看一个示例：

SCSS

@media print {
    @supports (transorm-origin: 5% 5%) {
        .foo {
            @at-root {
                .bar #{&} {
                    color: gray;
                }
            }
        }
    }
}

CSS

@media print {
  @supports (transorm-origin: 5% 5%) {
    .bar .foo {
      color: gray; 
    } 
  } 
}

默认情况之下，@at-root只是通过#{&}来排除选择器。然而，它也可以使用@at-root和whit或者without变得更加的灵活。比如，您可以使用@at-root和without在媒体查询的时候实现另一种样式。例如：

SCSS

@media print {
    .page {
        width: 8in;
        @at-root (without: media) {
            width: 960px;
        }
    }
}

CSS

@media print {
  .page {
    width: 8in; 
  } 
}
.page {
  width: 960px; 
}

你可以使用@at-root (without: ...)移除外面的任何指令。还可以通过空格用于移除多个指令，例如@at-root (without: media supports )同时移除了@media和@supports外部指令。

SCSS

@media print {
    @supports ( transform-origin: 5% 5% ) {
        .foo {
            color: green;
            @at-root (without: media supports){
                color: gray; 
            } 
        } 
    } 
}

CSS

@media print {
  @supports (transform-origin: 5% 5%) {
    .foo {
      color: green; 
    } 
  } 
}
.foo {
  color: gray; 
}

特别声明：到写本文的时候，运行@at-root (with:...)未成功过。如果有使用成功的同学，希望能分享使用案例。

案例：@at-rooot在BEM中的应用

什么是BEM就不在多说了，来看一个简单的应用示例，假如你的应用中有一段这样的代码：

.speech-bubble{}
.speech-bubble__header{}
.speech-bubble__text{}
.speech-bubble__text--link{}

前面介绍过，@at-root特性允许在Sass中嵌套，编译出来的代码不会发生嵌套。这可以很好的组织你的代码。为了更好的说明，我们先回到Sass中的嵌套：

SCSS

.speech-bubble {
    color: purple;
    .speech-bubble__header {
        color: orange;
    }
    .speech-bubble__text {
        color: black;
        .speech-bubble__text--link {
            color:green;
        }
    }
}

CSS

.speech-bubble {
  color: purple; 
}
.speech-bubble .speech-bubble__header {
  color: orange; 
}
.speech-bubble .speech-bubble__text {
  color: black; 
}
.speech-bubble .speech-bubble__text .speech-bubble__text--link {
  color: green; 
}

这样编译出来的CSS离开了使用BEM的宗旨，也就失去了存在的意义。这个时候或许想到了Sass的#{&}，想通过他来解决：

SCSS

.speech-bubble {
    color: purple;
    #{&}__header {
        color: orange;
    }
    #{&}__text {
        color: black;
        #{&}--link {
            color:green;
        }
    }
}

CSS

.speech-bubble {
  color: purple; 
}
.speech-bubble .speech-bubble__header {
  color: orange; 
}
.speech-bubble .speech-bubble__text {
  color: black; 
}
.speech-bubble .speech-bubble__text .speech-bubble .speech-bubble__text--link {
  color: green; 
}

编译出来的CSS说明一切，特别是用在.speech-bubble__text--link元素上的样式：

.speech-bubble .speech-bubble__text .speech-bubble .speech-bubble__text--link {
  color: green; 
}

可谓是差之毫厘失之千里。既然如此，我们一起来看@at-root能帮我们做什么：

SCSS

.speech-bubble {
    color: purple;
    @at-root #{&}__header {
        color: orange;
    }
    @at-root #{&}__text {
        color: black;
        @at-root #{&}--link {
            color:green;
        }
    }
}

CSS

.speech-bubble {
  color: purple; 
}
.speech-bubble__header {
  color: orange; 
}
.speech-bubble__text {
  color: black; 
}
.speech-bubble__text--link {
   color: green; 
}

好极了！完美实现BEM与Sass的结合。

不过大家先别急着高兴，Scott Kellum在评论中提出了一个要点。他通过Sass的Mixin给@at-root与BEM的结合创建了一个更完美的语法:

Scott的Mixins:

//elements get appended with "__" and the $name
@mixin e($name) {
  @at-root   #{&}__#{$name} {
    @content;
  }
}

//modifiers get appended with "--" and the $name
@mixin m($name) {
  @at-root   #{&}--#{$name} {
    @content;
  }
}

SCSS

.speech-bubble {
    color: purple;
    @include e(header) {
        color:orange;
    }
    @include e(text) {
        color:black;
        @include m(link){
            color:green;
        }
    }
}

CSS

.speech-bubble {
  color: purple; 
}
.speech-bubble__header {
  color: orange; 
}
.speech-bubble__text {
  color: black; 
}
.speech-bubble__text--link {
   color: green; 
}

是不是很完美，而且通过Mixin是不是更方便。如果你还在想他是否具有通用性。我们不仿在使用大家最常见的“媒体对象”来验证一回。

在媒体对象中存在两种情形，一种图片居左显示，另一种图片居右显示，同时我们给他的主体创建一个BFC。常见的结构如下：

HTML

<div class="media">
    <img src="http://www.w3cplus.com/preprocessor/logo.png" alt="Foo Corp logo" class="media__img--rev">
    <div class="media__body">
        <h3 class="alpha">Welcome to Foo Corp</h3>
        <p class="lede">Foo Corp is the best, seriously!</p>
    </div>
</div>  

SCSS

.media {
    @extend %clearfix;
    background-color: #f5f5f5;
    @include e(img) {
        float: left;
        display: inline;
        margin-right: 10px;
        @include m(rev){
            float: right;
            display: inline;
            margin-left: 10px;
        }
    }
    @include e(body){
        overflow: hidden;
    }
}

注：代码中引用了一个%clearfix用来实现清除浮动，具体制作方法，请点击W3cplusSass核心库中的mixins。

CSS

.media {
  *zoom: 1; 
}
.media:before, .media:after {
  content: "";
  display: table; 
}
.media:after {
  clear: both;
  overflow: hidden; 
}

.media {
  background-color: #f5f5f5; 
}
.media__img {
  float: left;
  display: inline;
  margin-right: 10px; 
}
.media__img--rev {
  float: right;
  display: inline;
  margin-left: 10px; 
}
.media__body {
  overflow: hidden; 
}

完美终结!

参考资料

• Sass 3.3 @at-root & BEM!
• Writing modular CSS (BEM/OOCSS) selectors with Sass 3.3
• Sass Changelog
• Spec for the @at-root directive
• Interpolation with parent reference (#{&}) inside multiple selector generates incorrect selector
• The things I want from Sass aren’t the things I thought I wanted
• BEM

总结

@at-root是Sass3.3版本中新增的特性，他可以让你在Sass中嵌套选择器，或者做别的事情，但编译出来的CSS却不会发生嵌套。让你的文件更简洁，更干净，更易于维护。特别是@at-root特性与CSS的BEM结合在一起，让你在编写样式时不用在恐惧BEM的长选择器的方式，同时让你的BEM更显风采。

当然@at-root是一个新特性，他有很多功能也还在完善当中，比如说@at-rooot (with:)，@at-root (without: rule)和@at-root (without: all)等。如果您对@at-root特性有更好的体验与理解，欢迎能在下面的评论中留下您的经验。

出处：http://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html