SASS 导入

CSS 提供了 @import 选项，使您能够将 CSS 分割成更小、更易于维护的部分。唯一的限制是每次您在 CSS 中使用 @import 时，它都会创建另一个 HTTP 请求。

Sass 在当前 CSS @import 的基础上构建。它不需要发出 HTTP 请求。相反，它只是获取您要导入的文件，并将其与您要导入到的文件组合在一起，以便您可以向 Web 浏览器提供单个 CSS 文件。

假设我们有两个 Sass 文件，_reset.scss 和 base.scss，并且我们想将 _reset.scss 导入到 base.scss 中。

请看这个例子

导入文件时，您不需要包含文件扩展名“.scss”。它将生成以下 CSS 文件

处理后的 CSS

SASS 导入示例

让我们看一个例子，了解 Sass 导入的用法。我们有一个名为“simple.html”的 HTML 文件，其中包含以下代码

文件：simple.html

创建一个名为“simple.scss”的 SCSS 文件，其中包含以下代码

文件：simple.scss

将这两个文件放在根文件夹中。

现在，打开命令提示符并运行 watch 命令，告诉 SASS 监视该文件，并在 SASS 文件更改时更新 CSS。

执行以下代码：sass --watch simple.scss:simple.css

它将自动在同一目录中创建一个名为“simple.css”的普通 CSS 文件。

例如

创建的 CSS 文件“simple.css”包含以下代码

现在，执行上面的 HTML 文件，它会读取 CSS 值。

输出