标签：class position 大括号 for循环 div 定义 style 之一 举例
/* 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
}
*/
sass css样式：@for循环、样式变量与#{} 变量插值
标签：class position 大括号 for循环 div 定义 style 之一 举例
原文地址：https://www.cnblogs.com/alchemist-z/p/12233274.html