SCSS @import 语法更新指南
背景简述
Sass 团队宣布将在未来版本中弃用 @import
规则,并推荐使用新的 @use
和 @forward
规则来替代。本文将介绍这一重要变更及迁移方案。
为什么要更改?
@import
存在的问题:- 所有导入都共享相同的命名空间,容易造成命名冲突
- 每次使用
@import
都会重复执行导入的文件 - 无法清晰地知道某个变量/混合器来自哪个文件
- 新规则的优势:
@use
为每个文件创建独立的命名空间- 一个文件只会被执行一次,不论被
@use
多少次 - 明确的依赖关系,更容易追踪变量来源
新旧语法对比
旧语法 (@import)
scss
@import "variables";
@import "mixins";
新语法 (@use)
scss
@use "variables" as *;
@use "mixins" as *;
新语法详解
@use
@use
语法用于引入一个 Sass 文件,并为该文件创建一个独立的命名空间。命名空间可以避免变量和混合器的命名冲突,并确保每个文件只被加载一次。
scss
@use "variables" as *;
@use "mixins" as *;
@forward
@forward
语法用于将一个文件中的变量和混合器转发到另一个文件中,以便在其他文件中使用。这对于创建可重用的模块非常有用。
scss
@forward "variables";
@forward "mixins";
## 迁移方案
### 自动迁移
1. 安装 Sass 迁移工具
```bash
npm install -g sass-migrator
- 运行迁移命令
bash
sass-migrator module --migrate-deps your-entrypoint.scss
如果您想从全局内置函数迁移,但尚未准备好完全迁移 @import 规则,则可以传递 --built-in-only 标志来迁移函数,同时保持@import 规则不变