sass css样式：@for循环、样式变量与#{} 变量插值
/* sass 可以用写JS的思想来写CSS代码
* #{}
用来插值，大括号中填写需要插入的变量
* @for 变量 from 1 through 9
从1到9循环
* $sizei
定义一个变量 值为 $i * 7.5
* .myposition0#{$i}0#{$j}
class类名中插入变量值
//作用举例：定位大量规律增减的 top left值
@for $i from 1 through 9 {
$sizei : $i * 7.5;
@for $j from 1 through 9 {
$sizej : $j * 7.5;
.myposition0#{$i}0#{$j}{
top : #{$sizei}vw;
left : #{$sizej}vw;
}
}
@for $n from 10 through 11 {
$sizen : $n * 7.5;
.myposition0#{$i}#{$n}{
top : #{$sizei}vw;
left : #{$sizen}vw;
}
}
};
@for $i from 10 through 11 {
$sizei : $i * 7.5;
@for $j from 1 through 9 {
$sizej : $j * 7.5;
.myposition#{$i}0#{$j}{
top : #{$sizei}vw;
left : #{$sizej}vw;
}
}
@for $n from 10 through 11 {
$sizen : $n * 7.5;
.myposition#{$i}#{$n}{
top : #{$sizei}vw;
left : #{$sizen}vw;
}
}
}
以上代码，编译之后变成如下代码
.myposition0101, .myposition0102, .myposition0103, .myposition0104, .myposition0105, .myposition0106, .myposition0107, .myposition0108, .myposition0109, .myposition0110, .myposition0111 {
top: 7.5vw;
}
.myposition0201, .myposition0202, .myposition0203, .myposition0204, .myposition0205, .myposition0206, .myposition0207, .myposition0208, .myposition0209, .myposition0210, .myposition0211 {
top: 15vw;
}
.myposition0301, .myposition0302, .myposition0303, .myposition0304, .myposition0305, .myposition0306, .myposition0307, .myposition0308, .myposition0309, .myposition0310, .myposition0311 {
top: 22.5vw;
}
......
.myposition0111, .myposition0211, .myposition0311, .myposition0411, .myposition0511, .myposition0611, .myposition0711, .myposition0811, .myposition0911, .myposition1011, .myposition1111 {
left: 82.5vw;
}
单独拿出其中之一
.myposition0101{
top: xxx;
left:xxx
}
*/
相关推荐
zhaobig 2020-08-17
xiaonamylove 2020-08-16
CloudXli 2020-08-14
LowisLucifer 2020-08-09
yawei 2020-07-06
zlfing 2020-07-07
徐建岗网络管理 2020-06-09
LowisLucifer 2020-06-05
JamesRayMurphy 2020-05-31
Jieen 2020-05-18
zyazky 2020-05-17
sdwylry 2020-05-14
sucheng 2020-05-09
sdwylry 2020-04-27
tengyuan 2020-04-25
huakai 2020-02-25
Ericbig 2020-02-25
yunfenglee 2020-02-02