Sass @at-root指令

@at-root指令是嵌套的規則的集合，它能夠使樣式塊在文檔的根目錄。

@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文件：

At-root 示例-www.yiibai.com

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

接下來，創建文件 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文件，下面的代碼：

h2 {
color: #808000;
background-color: #DB7093;
}
.style {
font-size: 20px;
font-style: bold;
color: #B8860B;
}

讓我們來執行以下步驟，看看上面的代碼工作：

保存上面的html代碼到atroot.htmll文件。
在瀏覽器中打開該HTML文件，得到輸出如下顯示
Sass