Sass - 根部指令

说明

@at-root 指令是一组嵌套规则，它能使样式块成为文档的根部。

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

实例

以下示例演示了在 SCSS 文件中使用 @at-root −

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 代码保存到 atroot.html 文件中。
在浏览器中打开此 HTML 文件，显示的输出如下。

sass_rules_and_directives.htm

打印页面

上一个

下一个