Sass - SyntaxError: Not a valid CSS value

Question

This is my Sass file:

\: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 looks like this:

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

Now this is the error I am getting:

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

It refers to --color-#{$name}: #{$color}.

Answer 1

I did some testing and found that the @elseif is incorrect, it should be @else if with a space between else and if.

Some additional notes -- the quotes around the type are not necessary. Both of these will work:

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

Additionally, colors are their own type in sass, so the last condition may not work as desired and you may want to change it:

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