Sass 提供了 @import 指令来将其他 Sass 或 SCSS 文件导入到当前文件中。这是在 Sass 中组织代码和实现模块化的主要方式。

一、基本用法

// 导入另一个 Sass 文件
@import "variables";
@import "mixins";
@import "components/button";

1、文件扩展名处理

• 可以省略 .scss 或 .sass 扩展名
• 以下写法是等效的：

  @import "variables.scss";
  @import "variables";

2、局部文件 (Partials)

Sass 鼓励使用局部文件（以 _ 开头的文件）来组织代码：

1. 创建局部文件：_variables.scss
2. 导入时可以省略 _：

   @import "variables"; // 实际导入的是 _variables.scss

3、多文件导入

可以一次导入多个文件：

@import "variables", "mixins", "components/button";

4、嵌套导入

Sass 允许在规则块内嵌套导入：

.container {
  @import "components/panel";
}

这样导入的文件中的所有样式都会嵌套在 .container 选择器内。

二、默认变量覆盖

Sass 允许在导入时覆盖默认变量：

_variables.scss (库文件)

$primary-color: #3498db !default;
$secondary-color: #e74c3c !default;

style.scss (用户文件)

@import "variables"; // 导入库文件
$primary-color: #2c3e50; // 覆盖默认值

.button {
  background-color: $primary-color; // 将使用 #2c3e50
  color: $secondary-color; // 将使用默认的 #e74c3c
}

三、与 CSS @import 的区别

• Sass 的 @import 是在编译时处理的
• CSS 的 @import 是在运行时发起的 HTTP 请求
• Sass 会将被导入的文件合并到单个 CSS 输出文件中

由于 sass 兼容 css，所以在 sass 文件中使用 @import 语法导入一个css文件时，会被识别为CSS的导入。我们可以将该 css 文件的后缀名改为scss，这样在编译时，sass会将其识别为scss文件，从而可以使用sass的语法。

四、新模块系统 (@use)

在较新的 Sass 版本中，推荐使用 @use 代替 @import：

@use "variables";
@use "mixins";

@use 提供了更好的命名空间控制和更明确的依赖关系。

五、注意事项

1. 避免循环导入（A 导入 B，B 又导入 A）
2. 在 Dart Sass 中，@import 正逐渐被模块系统 (@use) 取代
3. 导入顺序会影响变量和混合的可用性

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24