Jamie Carter Jamie Carter - 1 month ago 10
Sass (Sass) Question

Sass Error when trying to compile CSS of a map using @each function

Im trying to create a series of classes for defining the styles for an image based on a skill. The skills and the associated color are created in a map.

$skills-color: (
default : #D8D8D8,
6 : #2E80EC,
5 : #E0102A,
8 : #164242,
11 : #2D882D,
10 : #F8E71C,
9 : #2A1E4B,
sales : #00FFFF,
7 : #2ECC32
);


It runs though the following @each

@each $skill, $color in $skills-color {
.#{$skill}-small {
box-shadow:
0 0 0 3px rgba(255, 255, 255, 1),
0 0 0 5px $color;
}
.#{$skill}-med {
box-shadow:
0 0 0 3px rgba(255, 255, 255, 1),
0 0 0 6px $color;
}
.#{$skill}-large {
box-shadow:
0 0 0 4px rgba(255, 255, 255, 1),
0 0 0 8px $color;
}
}


This worked fine when all the map 'keys' where words rather than a number

This is the error:

Error: Invalid CSS after ".": expected class name, was "6-small"


Note: I tried adding the keys in '1', '2', '3' etc but to no avail.

Thanks for helping!

Answer

i don't believe that a css class name starting with a number is valid. Perhaps try appending a letter to the front of all the rows in the list to see if that helps.

Cheers.