Sass - SyntaxError：不是有效的 CSS 值答案

【问题标题】：Sass - SyntaxError: Not a valid CSS valueSass - SyntaxError：不是有效的 CSS 值
【发布时间】：2018-02-20 00:06:32
【问题描述】：

这是我的 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, light: #b6e1f9) 不是有效的 CSS 值。

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

【问题讨论】：

你使用的是什么版本的 sass？
@miir 。 3.5.1

标签： css sass precompile

【解决方案1】：

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

一些额外的注释——类型周围的引号不是必需的。这两种方法都可以：

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

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

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

【讨论】：