Nuxt3+Vite环境下SASS@for循环调用变量报错求助

问题场景 #

在Nuxt3 + Vite项目中，尝试用Sass的@for循环动态调用命名变量生成类时，执行yarn dev出现Undefined variable错误。

错误信息 #

ERROR [sass] Undefined variable. 11:03:32 AM
╷
87 │ @include size($marketing-square#{$i}-size)
│ ^^^^^^^^^^^^^^^^^
╵

ERROR [sass] Undefined variable. 10:57:10 AM
╷
90 │ left: $marketing-square#{$i}-position
│ ^^^^^^^^^^^^^^^^^
╵
assets/style/_work-steps2.sass 90:23 @import
assets/style/main.sass 9:9 root stylesheet

现有代码 #

变量定义 #

$desktop-size: $widescreen - (2 * $gap)

// SIZES
$marketing-square1-size: 136px
$marketing-square2-size: 80px
$marketing-square3-size: 120px
$marketing-square4-size: 174px
$marketing-square5-size: 220px
$marketing-square6-size: 70px
$marketing-square7-size: 130px

// POSITIONS
$marketing-square1-position: 0
$marketing-square2-position: $marketing-square1-size + 30px
$marketing-square3-position: $marketing-square2-position + $marketing-square2-size + 80px
$marketing-square4-position: $marketing-square3-position + $marketing-square3-size + 60px
$marketing-square5-position: $marketing-square4-position + $marketing-square4-size - 30px
$marketing-square6-position: $marketing-square5-position + $marketing-square5-size + 20px
$marketing-square7-position: $desktop-size - $marketing-square7-size

循环代码 #

.gp__square
    bottom: 0
    left: 0
    position: absolute
    color: #898989
    white-space: nowrap
    border: 2px solid $black

    @for $i from 1 through 7
        &--#{$i}
            @include size($marketing-square#{$i}-size)
            left: $marketing-square#{$i}-position

解决方案 #

Sass不支持直接通过字符串拼接动态引用变量名，需改用**映射（Map）**存储数据，通过map-get()方法动态取值。

修改后的变量定义 #

将分散变量整合为两个Map：

$desktop-size: $widescreen - (2 * $gap)

// SIZES Map
$marketing-square-sizes: (
    1: 136px,
    2: 80px,
    3: 120px,
    4: 174px,
    5: 220px,
    6: 70px,
    7: 130px
)

// POSITIONS Map
$marketing-square-positions: (
    1: 0,
    2: map-get($marketing-square-sizes, 1) + 30px,
    3: map-get($marketing-square-positions, 2) + map-get($marketing-square-sizes, 2) + 80px,
    4: map-get($marketing-square-positions, 3) + map-get($marketing-square-sizes, 3) + 60px,
    5: map-get($marketing-square-positions, 4) + map-get($marketing-square-sizes, 4) - 30px,
    6: map-get($marketing-square-positions, 5) + map-get($marketing-square-sizes, 5) + 20px,
    7: $desktop-size - map-get($marketing-square-sizes, 7)
)

修改后的循环代码 #

通过map-get()从Map中动态获取对应值：

.gp__square
    bottom: 0
    left: 0
    position: absolute
    color: #898989
    white-space: nowrap
    border: 2px solid $black

    @for $i from 1 through 7
        &--#{$i}
            @include size(map-get($marketing-square-sizes, $i))
            left: map-get($marketing-square-positions, $i)

原理说明 #

Sass的变量名是静态解析的，无法通过字符串拼接（$marketing-square#{$i}-size）动态识别变量。而Map作为键值对集合，可通过循环变量作为键精准获取对应值，适配批量生成类的场景。

内容的提问来源于stack exchange，提问作者Giacomo