SASS循环以输出具有唯一编号和背景图像的类 [英] SASS Loop to output classes with unique number and background-image
本文介绍了SASS循环以输出具有唯一编号和背景图像的类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我偶然发现了一个SASS循环非常好的情况。我有一个< div>
的加载,每个都有一个唯一的类遵循 .band-(number) / code>,我的HTML的简化版本将看起来像这样...
I've stumbled across a situation where a SASS loop would be great. I have a load of <div>
's, each one has the a unique class that follows the pattern of .band-(number)
, a simplified version of my HTML would look like this...
<div class="band-1"></div>
<div class="band-2"></div>
<div class="band-3"></div>
etc.
每个元素都有一个独特的 image
,但是图像的命名约定遵循 div
本身的命名约定。我的CSS需要输出这个...
Each of these elements has a unique background-image
, but the naming convention of the image follows that of the div
s themselves. My CSS needs to output this...
.band-1 {
background-image:url('../img/image_01.png');
}
.band-2 {
background-image:url('../img/image_02.png');
}
.band-3 {
background-image:url('../img/image_03.png');
}
我如何以简洁的方式输出?提前感谢。
How would I go about outputting this in a concise way? Thanks in advance.
推荐答案
您可以使用为
循环:
@for $i from 1 through 15 {
@if $i < 10 {
.band-#{$i} {
background-image:url("../img/image_0#{$i}.png");
}
} @else {
.band-#{$i} {
background-image:url("../img/image_#{$i}.png");
}
}
}
这篇关于SASS循环以输出具有唯一编号和背景图像的类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文