• 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
            }
     
     
            */
  • 相关阅读:
    ELK安装(ubuntu)
    Ubuntu18.04上安装java
    .net core跨平台的文件路径
    缺少vim
    docker进入容器
    docker删除名字为none的imgae
    Ubuntu18.04上安装Docker-Compose
    Java类的反射
    Java常用类(二) Scanner类和大数类
    Java常用类(一)Math类和Random类
  • 原文地址:https://www.cnblogs.com/alchemist-z/p/12233274.html
Copyright © 2020-2023  润新知