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

        }

 

 

        */