Sass @at-root指令 - tw511教學網

@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.tw511.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檔案，得到輸出如下顯示