我尝试像这样变暗可变数量的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
