Sass - SyntaxError:不是有效的CSS值

时间:2017-09-11 17:07:01

标签: css sass precompile

这是我的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 :(较暗:#2840d0,黑暗:#2d5ee8,基地:#2d81e8,灯光:#76b8f0,较轻:#b6e1f9)不是有效的CSS值。

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

1 个答案:

答案 0 :(得分:1)

我做了一些测试,发现@elseif不正确,应该是@else ifelseif之间有空格。

一些额外的注释 - 类型周围的引号不是必需的。这两个都有效:

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

此外,颜色是sass中自己的类型,因此最后一个条件可能无法正常工作,您可能想要更改它:

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