薩斯 - 語法錯誤：不是有效的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

此外，顏色有自己的類型，青菜，這樣所需的最後一個條件可能不工作，你可能要改變它：

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