Sass - Syntaxerror: Kein gültiges CSS Wert

Question

Dies ist meine Sass-Datei:

\: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 wie folgt aussieht: Jetzt

$colors: (
    accent: (
     darker: #2840d0, 
     dark: #2d5ee8, 
     base: #2d81e8, 
     light: #76b8f0, 
     lighter: #b6e1f9 
    ) 
); 

das ist der Fehler Ich erhalte:

Sass::SyntaxError: (darker: #2840d0, dark: #2d5ee8, base: #2d81e8, light: #76b8f0, lighter: #b6e1f9) isn't a valid CSS value.

Es bezieht sich auf --color-#{$name}: #{$color}.

Answer 1

Ich habe einige Tests durchgeführt und festgestellt, dass die @elseif ist falsch, es sollte @else if mit einem Abstand zwischen else und if sein.

Einige zusätzliche Notizen - die Anführungszeichen um den Typ sind nicht notwendig. Beide arbeiten:

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

Zusätzlich Farben ihre eigene Art in sass sind, so dass die letzte Bedingung kann nicht wie gewünscht arbeiten, und Sie können es ändern möchten:

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