CodeBox

Appearance

浏览量：

SASS 模块系统迁移笔记 ​

问题背景 ​

在使用 SASS 时，遇到了以下问题：

  1. lighten() 函数已被弃用
  2. 从 @import 迁移到 @use 时，变量和函数需要命名空间

问题解决过程 ​

1. 替换已弃用的 lighten() 函数 ​

错误信息：

[sass] Deprecation Warning: $color: lighten() is deprecated.

原因： lighten() 函数在新版 SASS 中已被弃用。

解决方案： 使用 mix() 函数替代

scss
// ❌ 旧写法
background-image: linear-gradient(0deg, $dark, lighten($dark, 5%));

// ✅ 新写法
background-image: linear-gradient(0deg, $dark, mix(white, $dark, 5%));

说明： mix(white, $dark, 5%) 表示将白色和深色按 5% 的比例混合，效果等同于将深色调亮 5%。

2. 从 @import 迁移到 @use ​

错误信息：

[sass] Error: Undefined variable.

原因： @use 是 SASS 的模块系统，变量和函数会被命名空间化。

解决方案：

2.1 更新导入语句 ​

scss
// ❌ 旧写法
@import './var.scss';

// ✅ 新写法
@use './var.scss';

2.2 使用命名空间访问变量 ​

scss
// ❌ 旧写法
$dark

// ✅ 新写法
var.$dark

说明： 文件名 var.scss 会作为命名空间，变量需要通过 var.$变量名 访问。

2.3 导入颜色函数模块 ​

错误信息：

[sass] Error: Undefined function mix.

原因： 使用 @use 后，内置函数也需要从相应模块导入。

解决方案：

scss
// 导入颜色函数模块
@use 'sass:color';

// 使用命名空间调用函数
color.mix(white, var.$dark, 5%)

完整示例 ​

迁移前 ​

scss
@import './var.scss';

.module-wrapper {
    background-image: linear-gradient(0deg, $dark, lighten($dark, 5%));
    border: 2px solid $dark;
}

迁移后 ​

scss
@use './var.scss';
@use 'sass:color';

.module-wrapper {
    background-image: linear-gradient(0deg, var.$dark, color.mix(white, var.$dark, 5%));
    border: 2px solid var.$dark;
}

关键要点 ​

  1. @use vs @import

    • @use 是新的模块系统，推荐使用
    • @import 已被标记为废弃，将在未来版本中移除
    • @use 会为每个模块创建命名空间，避免变量和函数名冲突

  2. 命名空间规则

    • 默认命名空间是文件名（不含扩展名）
    • 可以通过 @use 'file' as namespace 自定义命名空间
    • 可以通过 @use 'file' as * 取消命名空间（不推荐）

  3. 内置模块

    • sass:color - 颜色函数（mix, lighten, darken 等）
    • sass:math - 数学函数
    • sass:string - 字符串函数
    • sass:list - 列表函数
    • sass:map - Map 函数
    • sass:meta - 元函数

  4. 常用颜色函数迁移

    scss
    @use 'sass:color';

// lighten() → color.mix(white, $color, $amount)
lighten($color, 10%) → color.mix(white, $color, 10%)

// darken() → color.mix(black, $color, $amount)
darken($color, 10%) → color.mix(black, $color, 10%)

// mix() → color.mix()
mix($color1, $color2, $weight) → color.mix($color1, $color2, $weight)

参考资源 ​