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
            }
     
     
            */
  • 相关阅读:
    【转载】不出国如何练就一口流利的英语?
    【转载】什么能力很重要——4
    【转载】什么能力很重要,但大多数人却没有?——3
    【转载】什么能力很重要,但大多数人却没有?——2
    【转载】什么能力很重要,但大多数人却没有?——1
    【转载】有哪些东西是你读研究生以后才懂的?
    JDBCTemplate基本使用
    Druid数据库连接池基本使用
    C3P0连接池
    简单理解数据库连接池(JDBC)
  • 原文地址:https://www.cnblogs.com/alchemist-z/p/12233274.html
Copyright © 2011-2022 走看看