Sass 根指令

2018-12-30 16:59 更新

描述

@ 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文件，将显示如下输出。

以上内容是否对您有帮助：

写笔记

我要补充