zoukankan      html  css  js  c++  java
  • Sass 条件-循环语句

    学习Sass中 @if...@else @for @while @each

    一、条件判断 - @if @else

      示例: 

     1 @mixin blockOrHidden($boolean:true){
     2     @if $boolean {
     3         @debug "$boolean is #{$boolean}";
     4         display: block;
     5     }
     6     @else {
     7         @debug "$boolean is #{$boolean}";
     8         display: none;
     9     }
    10 }
    11 
    12 .block {
    13     @include blockOrHidden;//默认
    14 }
    15 
    16 .hidden {
    17     @include blockOrHidden(false);//为假
    18 }

     输出:

    1 .block {
    2   display: block; }
    3 
    4 .hidden {
    5   display: none; }

    二、 @for 循环

      两种方式:
          @for $i from <start> through <end>
          @for $i from <start> to <end>
          $i 表示变量; start 表示起始值; end 表示结束值;
        
          这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。
      示例:

    1 //使用 through 关键字的示例:
    2 @for $i from 1 through 3 {
    3     .item-#{$i} {
    4          2em * $i;
    5     }
    6 }

       输出:

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

       示例:

    1 //使用 to 关键字的示例:
    2 @for $i from 1 to 3 {
    3     .item-#{$i}#{1} {
    4          2em * $i;
    5     }
    6 }

       输出:

    1 .item-11 {
    2   width: 2em; }
    3 
    4 .item-21 {
    5   width: 4em; }

      例子:

     1 /*
     2     for循环应用示例:
     3 */
     4 $grid-prefix: span !default;
     5 $grid- 60px !default;
     6 $grid-gutter: 20px !default;
     7 
     8 %grid {
     9     float: left;
    10     margin-left: $grid-gutter / 2;
    11     margin-right: $grid-gutter /2;
    12 }
    13 @for $i from 1 through 6 {
    14     .#{$grid-prefix}#{$i} {
    15          $grid-width * $i + $grid-gutter * ($i - 1);
    16         @extend %grid;
    17     }
    18 }
    View Code

      输出结果:

     1 /*
     2     for循环应用示例:
     3 */
     4 .span1, .span2, .span3, .span4, .span5, .span6 {
     5   float: left;
     6   margin-left: 10px;
     7   margin-right: 10px; }
     8 
     9 .span1 {
    10   width: 60px; }
    11 
    12 .span2 {
    13   width: 140px; }
    14 
    15 .span3 {
    16   width: 220px; }
    17 
    18 .span4 {
    19   width: 300px; }
    20 
    21 .span5 {
    22   width: 380px; }
    23 
    24 .span6 {
    25   width: 460px; }
    View Code

    三、@while 循环

      示例:

    1 $types: 4;
    2 $type- 20px;
    3 
    4 @while $types > 0 {
    5     .while-#{$types} {
    6          $type-width + $types;
    7     }
    8     $types: $types - 1;
    9 }
    View Code

      输出:

     1 /*
     2     while 循环
     3 */
     4 .while-4 {
     5   width: 24px; }
     6 
     7 .while-3 {
     8   width: 23px; }
     9 
    10 .while-2 {
    11   width: 22px; }
    12 
    13 .while-1 {
    14   width: 21px; }
    View Code

    四、@each 循环

      @each 循环就是去遍历一个列表,然后从列表中取出对应的值。
          @each 循环指令的形式: @each $var in <list>

      示例:

     1 $list: adam john wynn mason kuroir;//$list 是一个列表
     2 @mixin author-images {
     3     @each $author in $list {
     4         .photo-#{$author} {
     5             background: url("/images/avatars/#{$author}.png");
     6         }
     7     }
     8 }
     9 
    10 .author-bio {
    11     @include author-images;
    12 }
    View Code

      输出:

     1 .author-bio .photo-adam {
     2   background: url("/images/avatars/adam.png"); }
     3 .author-bio .photo-john {
     4   background: url("/images/avatars/john.png"); }
     5 .author-bio .photo-wynn {
     6   background: url("/images/avatars/wynn.png"); }
     7 .author-bio .photo-mason {
     8   background: url("/images/avatars/mason.png"); }
     9 .author-bio .photo-kuroir {
    10   background: url("/images/avatars/kuroir.png"); }
    View Code

    学习 大漠老师 - Sass入门篇 笔记 http://www.w3cplus.com/

  • 相关阅读:
    AIMS 2013中的性能报告工具不能运行的解决办法
    读懂AIMS 2013中的性能分析报告
    在线研讨会网络视频讲座 方案设计利器Autodesk Infrastructure Modeler 2013
    Using New Profiling API to Analyze Performance of AIMS 2013
    Map 3D 2013 新功能和新API WebCast视频下载
    为Autodesk Infrastructure Map Server(AIMS) Mobile Viewer创建自定义控件
    ADN新开了云计算Cloud和移动计算Mobile相关技术的博客
    JavaScript修改css样式style
    文本编辑神器awk
    jquery 开发总结1
  • 原文地址:https://www.cnblogs.com/Medeor/p/4967122.html
Copyright © 2011-2022 走看看