作者：捕鱼达人2502868831 | 来源：互联网 | 2023-09-23 12:45
html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| |
scss代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| @mixin openShop-icon{
$List_icon:thesyk_03,thesyk_06,thesyk_09,
thesyk_18,thesyk_21,thesyk_15,
thesyk_33,thesyk_27,thesyk_30,
thesyk_42,thesyk_39;
@each $animal in $List_icon{
::before{
background-image: url('../../icons/#{$animal}.png');
}
}
}
a.op-icon-1{
@include openShop-icon;
} |
编译后css：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| .item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_03.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_06.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_09.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_18.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_21.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_15.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_33.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_27.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_30.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_42.png"); }
.item-list a.op-icon-1 ::before {
background-image: url("../../icons/thesyk_39.png"); }
.item-list a.op-icon-2 ::before {
background-image: url("../../icons/thesyk_03.png"); }
.item-list a.op-icon-2 ::before {
background-image: url("../../icons/thesyk_06.png"); }
.item-list a.op-icon-2 ::before {
...................................} |
sass的方法是挺多的，自己有个想法，像
a.op-icon-1{
1
2
3
| @include openShop-icon;
} |
1
2
| 这段代码能不能把1当做一个变量， a.op-icon-1的1能每次递增1到12结束，每次递增后加载的样式是openShop-icon 中的样式，按顺序添加，不要变成 a.op-icon-1循环一遍，openShop-icon也循环一遍。
请问用sass该怎么实现？ |
京公网安备 11010802041100号