Sass

Question

这是我的 Sass 文件：

\:root
    @each $name, $color in $colors
        @if type-of($color) == "map"
            @each $subname, $subsize in $color
                --color-#{$name}-#{$subname}: #{$subsize}
        @elseif type-of($color) == "number"
            --color-#{$name}: #{$color}

$colors 看起来像这样：

$colors: (
    accent: (
        darker: #2840d0,
        dark: #2d5ee8,
        base: #2d81e8,
        light: #76b8f0,
        lighter: #b6e1f9
    )
);

现在这是我收到的错误：

Sass::SyntaxError: (darker: #2840d0, dark: #2d5ee8, base: #2d81e8, light: #76b8f0, lighter: #b6e1f9) isn't a valid CSS value.

指的是--color-#{$name}: #{$color}.

Answer 1

我做了一些测试，发现 @elseif 不正确，应该是 @else if，else 和 if 之间有一个 space。

一些附加说明 -- 类型周围的引号不是必需的。这两个都有效：

type-of($color) == "map" 和 type-of($color) == map

此外，颜色在 sass 中是它们自己的类型，因此最后一个条件可能无法按预期工作，您可能需要更改它：

@else if type-of($color) == "number" 到 @else if type-of($color) == color

Sass - SyntaxError: Not a valid CSS value

Sass - SyntaxError: Not a valid CSS value

css

precompile