SCSS @import 语法更新指南

上次更新 2024年12月24日星期二 6:28:59 字数 0 字 时长 0 分钟

背景简述

Sass 团队宣布将在未来版本中弃用 @import 规则,并推荐使用新的 @use 和 @forward 规则来替代。本文将介绍这一重要变更及迁移方案。

为什么要更改?

1. @import 存在的问题:
   • 所有导入都共享相同的命名空间,容易造成命名冲突
   • 每次使用 @import 都会重复执行导入的文件
   • 无法清晰地知道某个变量/混合器来自哪个文件
2. 新规则的优势:
   • @use 为每个文件创建独立的命名空间
   • 一个文件只会被执行一次,不论被 @use 多少次
   • 明确的依赖关系,更容易追踪变量来源

新旧语法对比

旧语法 (@import)

@import "variables";
@import "mixins";

新语法 (@use)

@use "variables" as *;
@use "mixins" as *;

新语法详解

@use

@use 语法用于引入一个 Sass 文件,并为该文件创建一个独立的命名空间。命名空间可以避免变量和混合器的命名冲突,并确保每个文件只被加载一次。

@use "variables" as *;
@use "mixins" as *;

@forward

@forward 语法用于将一个文件中的变量和混合器转发到另一个文件中,以便在其他文件中使用。这对于创建可重用的模块非常有用。

@forward "variables";
@forward "mixins";

## 迁移方案

### 自动迁移

1. 安装 Sass 迁移工具

```bash
npm install -g sass-migrator

2. 运行迁移命令

sass-migrator module --migrate-deps your-entrypoint.scss

如果您想从全局内置函数迁移，但尚未准备好完全迁移 @import 规则，则可以传递 --built-in-only 标志来迁移函数，同时保持@import 规则不变

参考

• Breaking Change: @import and global built-in functions