I am currently in the process of developing a set of classes to define image styles based on specific skills. Colors associated with each skill are stored in a map.
$skills-color: (
default : #D8D8D8,
6 : #2E80EC,
5 : #E0102A,
8 : #164242,
11 : #2D882D,
10 : #F8E71C,
9 : #2A1E4B,
sales : #00FFFF,
7 : #2ECC32
);
The code iterates through the map using @each loop.
@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;
}
}
However, an issue arises when using numerical keys in the map instead of words.
The error message reads:
Error: Invalid CSS after ".": expected class name, was "6-small"
I attempted using '1', '2', '3', etc. as keys, but it did not resolve the issue.
Thank you for your assistance!