Skip to content

SCSS @import 语法更新指南

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

背景简述

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

为什么要更改?

  1. @import 存在的问题:
    • 所有导入都共享相同的命名空间,容易造成命名冲突
    • 每次使用 @import 都会重复执行导入的文件
    • 无法清晰地知道某个变量/混合器来自哪个文件
  2. 新规则的优势:
    • @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
  1. 运行迁移命令
bash
sass-migrator module --migrate-deps your-entrypoint.scss

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

参考