Sass 导入 @import 详解 - 前端开发

Sass 是一种强大的 CSS 预处理器，它提供了许多有用的功能，包括导入其他 Sass 文件的能力。通过使用 @import 指令，我们可以将一个 Sass 文件导入到另一个 Sass 文件中，以便在项目中重用样式和模块。本文将详细介绍 @import 指令的用法以及如何在前端开发中有效地使用它。

基本用法

@import 指令用于将一个 Sass 文件导入到另一个 Sass 文件中。它的基本语法如下：

@import 'path/to/file';

在上面的代码中，‘path/to/file’ 是要导入的 Sass 文件的路径。路径可以是相对路径或绝对路径。如果路径是相对路径，它将相对于当前 Sass 文件的位置进行解析。

值得注意的是，文件扩展名 .scss 可以省略，因为 Sass 默认会寻找 .scss 扩展名的文件。如果你使用的是 .sass 语法，你需要在文件名后面添加 .sass 扩展名。

导入多个文件

@import 指令还可以用于导入多个文件。你可以在一个 @import 声明中指定多个文件，用逗号分隔它们，如下所示：