@at-root指令是嵌套的规则的集合，它能够使样式块在文档的根目录。
@at-root (without: ...) 以及 @at-root (with: ...)
@at-root 选择器默认不包括选择器。通过使用@at-root我们可以将嵌套指令之外的样式。例如，创建一个SASS文件，用下面的代码：
@media print {
.style {
height: 8px;
@at-root (without: media) {
color: #808000;;
}
}
上面的代码将被编译到CSS文件，如下所示：
@media print {
.style {
height: 8px;
}
}
.style {
color: #808000;
}
示例
下面的例子演示了使用 @at-root 在SCSS文件：
atroot.htmll
<!doctype html>
<head><meta charset="UTF-8"> <title>At-root 示例-www.xuhuhu.com</title>
<link rel="stylesheet" href="atroot.css" type="text/css" />
</head>
<body class="container">
<h2>使用at-root实例</h2>
<p class="style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
接下来，创建文件 atroot.scss
atroot.scss
h2{
color: #808000;
background-color: #DB7093;
@at-root {
.style{
font-size: 20px;
font-style: bold;
color: #B8860B;
}
}
}
可以告诉SASS监视文件，并随时使用下面的命令更新 SASS 文件来修改 CSS：
sass --watch C:\Ruby22-x64\atroot.scss:atroot.css
接着执行上面的命令，它会自动创建atroot.css文件，下面的代码：
atroot.css
h2 {
color: #808000;
background-color: #DB7093;
}
.style {
font-size: 20px;
font-style: bold;
color: #B8860B;
}
执行输出结果
让我们来执行以下步骤，看看上面的代码工作：
保存上面的html代码到atroot.htmll文件。在浏览器中打开该HTML文件，得到输出如下显示
上一篇：
Sass @extend指令
下一篇：
Sass @debug指令