scss-@at-root

　　@at-root指令可以使一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下。

　　下面就通过scss代码实例介绍一下它的作用:

　　没有使用@at-root命令的默认情况。

.parent{
  color:red;
  .child {
    width:200px;
    height:50px;
  }
}

　　编译成css代码如下:

.parent {
  color: red;
}
.parent .child {
  width: 200px;
  height: 50px;
}

　　使用@at-root命令的scss代码

.parent{
  color:red;
  @at-root .child {
    width:200px;
    height:50px;
  }
}

　　编译后的css代码如下：

.parent {
  color: red;
}
.child {
  width: 200px;
  height: 50px;
}

　　由于使用@at-root命令，那么.child就不参与嵌套，直接跳出嵌套。

　　代码在默认情况下@at-root并不会使指定的规则或则选择器跳出指令，比如@media或者@supports。

　　scss实例如下：

@media print {
  @at-root{
    .foo {
      color: green;
      color: gray;
    }
  }
}

　　编译后的css代码如下：

@media print {
  .foo {
    color: green;
    color: gray;
  }
}

　　可以看出@at-root默认情况下并不能使规则或者选择器跳出指令。

　　默认 @at-root 只会跳出选择器嵌套，而不能跳出 @media 或 @support，如果要跳出这两种，则需使用 @at-root(without: media)，@at-root(without: support)。这个语法的关键词有

四个：all（表示所有）, rule（表示常规）,  media（表示 media），support（表示 support ）。我们默认的 @at-root 其实就是 @at-root( without: rule )。

　　(1)、@at-root(without: rule)

　　rule 关键词只能跳出选择器嵌套，不能跳出 @media 和 @support

　　（2）、@at-root(without: media)

　　可以跳出 @media ，但是没有跳出父级选择器

　　scss代码实例如下：

@media print {
    .page {
    　　width: 800px;
    　　a {
        　　color: red;
        　　@at-root(without: media) {
        　　　　span { color: #00f }
        　　}
    　　}
   }
}

　　编译后的css代码如下：

@media print {
    .page {
        width: 800px;
    }
    .page a {
        color: red;
    }
}
.page a span {
    color: #00f;
}

　　由上可以看出 @at-root(without: media) 可以跳出 @media ，但是没有跳出父级选择器，如果我们想跳出 @media 和 父级嵌套，可以一次添加两个指令，两个指令用空格分隔，scss

代码实例如下：

@media print {
    .page {
    width: 800px;
    a {
            color: red;
        @at-root(without: media rule) {
        span { color: #00f }
        }
    }
    }
}

　　编译后的css代码如下：

@media print {
    .page {
        width: 800px;
    }
    .page a {
        color: red;
    }
}

span {
    color: #00f;
}
　

　　（3）、@at-root(without: support)

　　@at-root(without: support) 和 @at-root(without: media) 相似，只是跳出的是 @support。

　　（4）、@at-root(without: all)

　　@at-root(without: all) 是跳出所的指令和规则，如上面的代码里 @at-root(without: media rule) 我们可以换成 @at-root(without: all)，效果是一样的。