在嵌套的 mixin 中使用 SASS @each 变量

Posted 2023-03-16

【中文标题】在嵌套的 mixin 中使用 SASS @each 变量

【英文标题】：Use SASS @each variable inside nested mixin

【发布时间】：2019-07-13 13:33:12

【问题描述】：

我想使用 Sass 内置的 @each 方法来缩短这段代码：

.svg-circle-full 
    @include mixinSVG((
        'svg': $svgvar-icn-circle-full,
        'isWide': false
    )...);


.svg-circle-empty 
    @include mixinSVG((
        'svg': $svgvar-icn-circle-empty,
        'isWide': false
    )...);


.svg-circle-half 
    @include mixinSVG((
        'svg': $svgvar-icn-circle-half,
        'isWide': false
    )...);

基本上，我需要能够在 mixinSVG 混合中使用我的 @each 循环中的变量名。我正在尝试这个，但是当它碰到'svg'属性内的@each变量时它失败了：

@each $state in full, empty, half 
    .svg-circle-#$state 
        @include mixinSVG((
        'svg': $svgvar-icn-circle-#$state,
        'isWide': false
        )...);
    

【问题讨论】：

你也可以分享一下mixin吗？它应该可以正常工作

Creating or referencing variables dynamically in Sass的可能重复

【参考方案1】：

你在弄乱命名参数。

应该是这样的：

@each $state in triangle, square, circle 
    .svg-circle-#$state 
        @include mixinSVG(
        $svg: svgvar-icn-circle-#$state,
        $isWide: false
        );
    

来源：http://blog.ricardofilipe.com/post/object-arguments-in-sass

【讨论】：

这给了我同样的错误，抱怨变量名

您可能没有使用正确版本的 SCSS。这是无效的，是 SASS。 @JordanBarber