サス - にSyntaxError：ない有効なCSS値

Question

これは私のサスファイルです：

\: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べきであることがわかりました。

いくつかの追加の注釈 - 型の周りの引用符は必要ありません。これらの両方が動作します。必要に応じて、最後の条件が動作しない場合があり、あなたはそれを変更することもできますので、

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

はさらに、色は、SASSで自分のタイプです：

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