zoukankan      html  css  js  c++  java
  • 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
            }
     
     
            */
  • 相关阅读:
    python 正则表达式练习题
    python2与Python3的区别
    Python :生成一个1到50的大字符串,每个数字之间有个空格 1 2 3 4 ..........50
    关于实现今天到一年中任意一天两者之间的天数差的计算
    Window下pip的安装
    Pycharm中Git、Github的简单使用和配置
    Python中字符串操作函数string.split('str1')和string.join(ls)
    实现无密码远程登陆另一台机器
    我的第一篇博客
    String类型转List<Integer>
  • 原文地址:https://www.cnblogs.com/alchemist-z/p/12233274.html
Copyright © 2011-2022 走看看