Sass @ at-root指令用法详解

Sass @ at-root指令是嵌套规则的集合, 这些规则用于在文档根目录处设置样式。
句法：

@at-root (without: ...) and @at-root (with: ...)

让我们以一个示例来演示Sass @each指令与多个分配和映射的用法。我们有一个名为” simple.html” 的HTML文件, 其中包含以下数据。
【Sass @ at-root指令用法详解】HTML档案：simple.html

< !DOCTYPE html> < head> < title> @at-root Directive Example< /title> < link rel="stylesheet" href="http://www.srcmini.com/simple.css" type="text/css" /> < /head> < body class="container"> < h2> Example using at-root< /h2> < p class="style"> srcmini: A solution of all technology.< /p> < /body> < /html>

创建一个名为” simple.scss” 的SCSS文件, 其中包含以下数据。
SCSS文件：simple.scss

h2{color: blue; background-color: pink; @at-root {.style{ font-size: 20px; font-style: bold; color: violet; } }}

将两个文件都放在根文件夹中。
现在, 打开命令提示符并运行watch命令, 以告知SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码：sass – watch simple.scss：simple.css
它将在同一目录中自动创建一个名为” simple.css” 的普通CSS文件。
例如：