我尝试像这样变暗可变数量的div
使用以下代码：
使用以下代码：
@mixin color-divs ($count,$baseName,$startcolor) {
$color: $startcolor;
@for $i from 0 through $count {
$color: darken($color,9%);
##{$baseName}_#{$i} { background-color:$color; }
}
}
使用我期望的代码,变量$color会随着每次迭代而改变,但这并没有按预期工作.在第一次初始化之后,该值被修复,并且每个元素具有相同的颜色.
解决方法
您可以使用@for中的$i来使颜色变暗,并将相应的类应用于div.希望这可以帮助.
SCSS
@mixin color-divs ($count,$startcolor) {
@for $i from 0 through $count {
$background-color: darken($startcolor,$i * $i);
.colored-div#{$i} {
background: $background-color;
height:100px;
width:200px;
float: left;
margin-right: 5px;
}
}
}
@include color-divs(5,'a',#ffd8b1);
HTML
<div class="colored-div1">a</div> <div class="colored-div2">b</div> <div class="colored-div3">c</div> <div class="colored-div4">d</div> <div class="colored-div5">e</div>
演示
见demo
