sass css样式:@for循环、样式变量与#{} 变量插值

dazhifu 2020-01-25

/* 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
        }
 
 
        */

相关推荐

onetozero / 0评论 2020-01-08