Sass @at-root指令

@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

At-root 示例-www.yiibai.com

使用at-root實例

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

接下來,創建文件 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