Sass — SyntaxError: недопустимое значение CSS

Это мой файл 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}.


person heroxav    schedule 11.09.2017    source источник
comment
Какую версию sass вы используете?   -  person miir    schedule 11.09.2017
comment
@миир . 3.5.1   -  person heroxav    schedule 11.09.2017


Ответы (1)


Я провел небольшое тестирование и обнаружил, что @elseif неверно, это должно быть @else if с пробелом между else и if.

Некоторые дополнительные примечания - кавычки вокруг типа не нужны. Оба они будут работать:

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

Кроме того, цвета в sass имеют собственный тип, поэтому последнее условие может работать не так, как хотелось бы, и вы можете изменить его:

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

person miir    schedule 11.09.2017