Reputation: 649
I have a very challenging code for SASS SCSS lovers.
my code and loop challenge:
@for $i from 1 through 8 {
&.-overlay-#{$i} {
@include box-shadow($brand-color-#{$i});
}
}
The mixin ( what inside doesn't matters )
@mixin box-shadow($color: $black) {
box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}
The list of colors ( I do have 8 colors )
$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green; ... so on
The $brand-color-XX
variable is passed to the @mixin
What I want to do is, create with @for loop these variations:
.-overlay-1 .-overlay-2 .-overlay-3 ...so on
But that @for is not working at the moment, what do am I missing here?
Regards
M
Upvotes: 0
Views: 1416
Reputation: 1703
The @for
was working, but you were trying to use variables in a way they're not meant to be used. You can't combine 2 SASS/SCSS variables to make one. You don't have a variable called $brand-color-
so the compiler didn't know what to do with that. But you can get the result you want with a list.
$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green;
$colors: $brand-color-1, $brand-color-2, $brand-color-3;
@mixin box-shadow($color: $black) {
box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}
@for $i from 1 through length($colors) {
.-overlay-#{$i} {
@include box-shadow(nth($colors, $i));
}
}
You said the result you wanted was, .-overlay-1 .-overlay-2 .-overlay-3 ...so on
, so I'm not sure what you were doing with the &
. The &
is used to refer to the parent class. If you want to nest your created classes, you can do that too...
.cool {
@for $i from 1 through length($colors) {
.-overlay-#{$i} {
@include box-shadow(nth($colors, $i));
}
}
}
...or put them at the same level as the parent...
.cool {
@for $i from 1 through length($colors) {
&.-overlay-#{$i} {
@include box-shadow(nth($colors, $i));
}
}
}
...or create a different class
.cool {
@for $i from 1 through length($colors) {
&-overlay-#{$i} {
@include box-shadow(nth($colors, $i));
}
}
}
Upvotes: 3