• Sass-@for


    在制作网格系统的时候,大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写,但在 Sass 中,可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式:

    @for $i from <start> through <end>
    @for $i from <start> to <end>
    • $i 表示变量
    • start 表示起始值
    • end 表示结束值

    这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。

    如下代码,先来个使用 through 关键字的例子:

    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }

    编译出来的 CSS:

    .item-1 {
      width: 2em;
    }
    
    .item-2 {
      width: 4em;
    }
    
    .item-3 {
      width: 6em;
    }

    再来个 to 关键字的例子:

    @for $i from 1 to 3 {
      .item-#{$i} { width: 2em * $i; }
    }

    编译出来的 CSS:

    .item-1 {
      width: 2em;
    }
    
    .item-2 {
      width: 4em;
    }

    @for应用在网格系统生成各个格子 class 的代码:

    //SCSS 
    $grid-prefix: span !default;
    $grid- 60px !default;
    $grid-gutter: 20px !default;
    
    %grid {
      float: left;
      margin-left: $grid-gutter / 2;
      margin-right: $grid-gutter / 2;
    }
    @for $i from 1 through 12 {
      .#{$grid-prefix}#{$i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
      }  
    }

    编译出来的 CSS:

    .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
      float: left;
      margin-left: 10px;
      margin-right: 10px;
    }
    
    .span1 {
      width: 60px;
    }
    
    .span2 {
      width: 140px;
    }
    
    .span3 {
      width: 220px;
    }
    
    .span4 {
      width: 300px;
    }
    
    .span5 {
      width: 380px;
    }
    
    .span6 {
      width: 460px;
    }
    
    .span7 {
      width: 540px;
    }
    
    .span8 {
      width: 620px;
    }
    
    .span9 {
      width: 700px;
    }
    
    .span10 {
      width: 780px;
    }
    
    .span11 {
      width: 860px;
    }
    
    .span12 {
      width: 940px;
    }

    将上面的示例稍做修改,将 @for through 方式换成 @for to::

    //SCSS
    @for $i from 1 to 13 {
      .#{$grid-prefix}#{$i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
      }  
    }

    其最终编译出来的 CSS 代码和上例所编译出来的一模一样。

    这两段 Sass 代码并无太多差别,只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12,其遍历出来的终点值也是 12,和 <end> 值一样。配合 to 的 <end> 值是 13,其遍历出来的终点值是 12,就是 <end> 对就的值减去 1 。

  • 相关阅读:
    强大的js时间选择器 万年历
    js 锚点平滑定位
    php str_replace的替换漏洞
    绝对路径 相对路径 小结
    昨天去了长城
    [转载]71个做饭技巧好好记住了,不要忘记给自己做一顿美餐噢
    最近心情很糟,情绪很低落
    用javascript实现html页面之间的参数传递的四种方法
    解决ajax缓存问题
    [转载]30岁前男人需要完成的事
  • 原文地址:https://www.cnblogs.com/qjuly/p/9100742.html
Copyright © 2020-2023  润新知