色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Sass 根指令

描述

@ 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;
}

例子

以下示例演示如何在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>

接下來，創建文件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;
}

輸出

讓我們執行以下步驟，看看上面的代碼如何工作:

  • 讓我們執行以下步驟，看看上面的代碼如何工作:

  • 在瀏覽器中打開此HTML文件，將顯示如下輸出。

Sass rules and directives