SASS 中的 @import 是一条编译指令，它在项目构建阶段把多个 SCSS 或部分样式文件合并进同一个输出 CSS 中。和浏览器原生 CSS 的 @import 不同，它不会在运行时发起额外网络请求，因此能提升页面加载效率，同时让样式代码按功能拆分、便于复用与维护。
SASS @import 的主要作用
在实际开发中，@import 主要解决样式组织的问题。下面列出几个常见用途：
- 把变量、混合宏、函数集中放在基础文件，其他文件引入后直接使用
- 按页面或组件拆分样式，编译时合并为单一 CSS，结构清晰
- 避免原生 CSS @import 造成的串行加载与性能损耗
- 通过局部文件（以下划线开头）控制哪些文件不参与单独编译
与原生 CSS @import 的区别
原生 CSS 的 @import 由浏览器处理，会阻塞渲染并增加请求数；SASS 的 @import 在编译期完成文件拼接。简单对比如下：
| 对比项 | 原生 CSS @import | SASS @import |
|---|---|---|
| 处理时机 | 浏览器运行时 | 编译构建时 |
| 网络请求 | 会产生额外请求 | 无额外请求 |
| 变量共享 | 不支持 | 支持 |
基础使用示例
假设我们有变量文件和主样式文件，可以用 @import 引入变量。注意局部文件以下划线开头，如 _variables.scss。
// _variables.scss
$primary-color: #3498db;
$font-stack: "Helvetica", sans-serif;
// main.scss
@import "variables"; // 引入局部文件，不加下划线和扩展名
body {
font-family: $font-stack;
color: $primary-color;
}
编译后，变量会被替换，并合并到同一个 CSS 文件里。
组织多模块样式
中大型项目常按模块拆分，再用一个入口文件统一引入：
// index.scss @import "variables"; @import "reset"; @import "buttons"; @import "layout";
这样每个模块独立编写，入口文件清晰描述依赖关系。
使用注意点
虽然 @import 很方便，但在新版本 Dart Sass 中官方更推荐 @use 和 @forward，因为 @import 存在全局命名污染问题。不过理解 @import 仍是维护老项目的基础。
如果只需要兼容旧代码或简单项目，@import 依然可用；新项目建议逐步迁移到 @use 规则。
小结
SASS @import 的核心价值是编译期合并与样式复用，它让 CSS 具备模块化能力，是前端工程化中组织样式的重要手段。