Below is the code in 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 variable is defined like this:
$colors: (
accent: (
darker: #2840d0,
dark: #2d5ee8,
base: #2d81e8,
light: #76b8f0,
lighter: #b6e1f9
)
);
An error message I encountered is as follows:
Sass::SyntaxError: (darker: #2840d0, dark: #2d5ee8, base: #2d81e8, light: #76b8f0, lighter: #b6e1f9) isn't a valid CSS value.
This error relates to the line --color-#{$name}: #{$color}.