[英]@mixin with $variables as params inside a @for loop SASS SCSS
I have a very challenging code for SASS SCSS lovers. 对于SASS SCSS爱好者,我有一个非常具有挑战性的代码。
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(里面没有关系)
@mixin box-shadow($color: $black) {
box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}
The list of colors ( I do have 8 colors ) 颜色列表(我确实有8种颜色)
$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green; ... so on
The $brand-color-XX
variable is passed to the @mixin $brand-color-XX
变量传递给@mixin
What I want to do is, create with @for loop these variations: 我想做的是,使用@for循环创建这些变化:
.-overlay-1 .-overlay-2 .-overlay-3 ...so on .-overlay-1 .-overlay-2 .-overlay-3 ...等等
But that @for is not working at the moment, what do am I missing here? 但是@for目前无法正常工作,我在这里想念什么?
Regards 问候
M 中号
The @for
was working, but you were trying to use variables in a way they're not meant to be used. @for
工作正常,但是您试图以不被使用的方式使用变量。 You can't combine 2 SASS/SCSS variables to make one. 您不能将2个SASS / SCSS变量组合为一个。 You don't have a variable called
$brand-color-
so the compiler didn't know what to do with that. 您没有名为
$brand-color-
的变量,因此编译器不知道该如何处理。 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 &
. 您说您想要的结果是
.-overlay-1 .-overlay-2 .-overlay-3 ...so on
,所以我不确定您对&
。 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));
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.