for循环中的动态函数参数

Question

我试图通过调用从地图获取颜色的函数在 for 循环中生成 CSS 变量。我创建了一个带有颜色的地图，如下所示：

$shade-colors: (
    100: #1A1A1A,
    200: #2E2E2E,
    300: #495057,
    400: #6c757d,
    500: #adb5bd,
    600: #cccccc,
    700: #dee2e6,
    800: #e9ecef,
    900: #ececec  
);

要从此地图（和其他地图）获取颜色，我正在使用此函数：

@function color($cat, $color, $shade: base) {
    @if ($cat == 'theme') {
        @return map-get($theme-colors, $color, $shade);
    }
    @else if ($cat == 'shade') {
        @return map-get($shade-colors, $color);
    }
    @else {
        @return map-get($cat, $color, $shade);
    }
}

我想通过 for 循环从 $shade-colors 映射中动态生成 CSS 变量，如下所示：

@for $i from 1 through 9 {
    $i: #{$i}00;
    $val: color('shade', #{$i});
    --color-shade-#{$i}: #{$val};
}

出于某种原因，我无法让它工作。问题出现在函数调用的第二个参数中。使用静态值可以，但它不能像我预期的那样使用动态生成的 100 到 900。这是代表这个问题的笔： https://codepen.io/ikmaakt/pen/KKvqMMg

Answer 1

一种方法是直接遍历 map 而不是使用一些相当复杂的逻辑来构建名称和获取值的单独 for 循环

通过迭代生成变量的示例 $shade-colors:

:root {
  @each $name, $color in $shade-colors {
    --color-shade-#{$name}: #{$color};
  }

如果你真的想按照自己的方式去做，我建议创建一个数组并使用 @each:

对其进行迭代

$weights: 100, 200, 300, 400, 500, 600, 700, 800, 900;

:root {
  @each $weight in $weights {
    --color-shade-#{$weight}: color('shade', #{#{$weight});
  }
}

for循环中的动态函数参数

Dynamic function parameter in for loop

css

sass