免費(fèi)AI編程助手
Sass 根指令
2018-12-30 16:59 更新
描述
@ at-root 指令是嵌套規(guī)則的集合，它能夠在文檔的根位置創(chuàng)建樣式塊。
@ at-root（without:...）和@ at-root（with:...）
默認(rèn)情況下， @ at-root 選擇器不包括選擇器。 通過使用 @ at-root ，我們可以將樣式移動(dòng)到嵌套指令之外。
例如，使用以下代碼創(chuàng)建一個(gè)SASS文件:
@media print {
.style {
height: 8px;
@at-root (without: media) {
color: #808000;;
}
}
上面的代碼將編譯成CSS文件，如下所示:
@media print {
.style {
height: 8px;
}
}
.style {
color: #808000;
}
例子
以下示例演示如何在SCSS文件中使用 - @
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>
接下來，創(chuàng)建文件 atroot.scss 。
atroot.scss
h2{
color: #808000;
background-color: #DB7093;
@at-root {
.style{
font-size: 20px;
font-style: bold;
color: #B8860B;
}
}
}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\atroot.scss:atroot.css
接下來執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 atroot.css 文件:
atroot.css
h2 {
color: #808000;
background-color: #DB7093;
}
.style {
font-size: 20px;
font-style: bold;
color: #B8860B;
}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
在瀏覽器中打開此HTML文件，將顯示如下輸出。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：