描述
该@at-root指令是嵌套的规则的集合，它能够使样式块在文档的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;
}例
以下示例演示了SCSS文件中@ at-root的用法：
atroot.htm
<!doctype html>
<head>
<title>At-root Example</title>
<link rel = "stylesheet" href = "atroot.css" type = "text/css" />
</head>
<body class = "container">
<h2>Example using 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:\ruby\lib\sass\atroot.scss:atroot.css
接下来，执行以上命令；它将使用以下代码自动创建atroot.css文件：
atroot.css
h2 {
color: #808000;
background-color: #DB7093;
}
.style {
font-size: 20px;
font-style: bold;
color: #B8860B;
}作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1716.html
