I am struggling with my SCSS files and color scheme
colors.scss
@import './variables';
$colors: (
p: $color-primary,
s: $color-secondary,
t: $color-tertiary,
q: $color-quartary,
);
@each $name, $hsl in $colors {
.c-#{name} {
color: $hsl;
}
.bg-#{name} {
background: $hsl;
}
}
Alongside the file containing variables
variables.scss
$color-primary: hsl(113, 99%, 53%);
$color-secondary: hsl(0, 7%, 19%);
$color-tertiary: hsl(0, 7%, 78%);
$color-quartary: hsl(2, 87%, 48%);
Lastly
main.scss
@import './variables';
@import './colors';
body {
color: $color-tertiary;
background-color: $color-secondary;
}
My question is why I cannot utilize the classes created within the @each loop as expected like c-p, bg-p, c-s, etc.
If I manually define a class like c-p
.c-p {
color: $color-primary;
}
It works regardless of where it's defined in _colors.scss or main.scss, either before or after the @each statement. Why is that?