• 2-1 Sass的控制命令


    @if

    @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。

    假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示:

    //SCSS
    @mixin blockOrHidden($boolean:true) {
      @if $boolean {
          @debug "$boolean is #{$boolean}";
          display: block;
        }
      @else {
          @debug "$boolean is #{$boolean}";
          display: none;
        }
    }
    
    .block {
      @include blockOrHidden;
    }
    
    .hidden{
      @include blockOrHidden(false);
    }

    编译出来的CSS:

    .block {
      display: block;
    }
    
    .hidden {
      display: none;
    }

    @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} {  2em * $i; }
    }

    编译出来的 CSS:

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

    再来个 to 关键字的例子:

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

    编译出来的 CSS:

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

    @for循环 (下)

    上一小节的那个实例几乎用不着,哈哈,所以其实是没什么营养的东西,只是帮助理解了原来 @for 是这么回事。怎么的也不能就这么忽悠大家啊,大家好不容易抽空看下文章,就这么点扯淡的东西怎么对得住呢。下面再来个营养级别的,@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}{
         $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 {
       60px;
    }
    
    .span2 {
       140px;
    }
    
    .span3 {
       220px;
    }
    
    .span4 {
       300px;
    }
    
    .span5 {
       380px;
    }
    
    .span6 {
       460px;
    }
    
    .span7 {
       540px;
    }
    
    .span8 {
       620px;
    }
    
    .span9 {
       700px;
    }
    
    .span10 {
       780px;
    }
    
    .span11 {
       860px;
    }
    
    .span12 {
       940px;
    }

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

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

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

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

    @while循环

    @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。这个和 @for 指令很相似,只要 @while 后面的条件为 true 就会执行。

    这里有一个 @while 指令的简单用例:

    //SCSS
    $types: 4;
    $type- 20px;
    
    @while $types > 0 {
        .while-#{$types} {
             $type-width + $types;
        }
        $types: $types - 1;
    }

    编译出来的 CSS

    .while-4 {
       24px;
    }
    
    .while-3 {
       23px;
    }
    
    .while-2 {
       22px;
    }
    
    .while-1 {
       21px;
    }

    @each循环

    @each 循环就是去遍历一个列表,然后从列表中取出对应的值。

    @each 循环指令的形式:

    @each $var in <list>

    如果你没有接触过列表,也不要紧,他也非常简单。

    在下面的例子中你可以看到,$var 就是一个变量名,<list> 是一个 SassScript 表达式,他将返回一个列表值。变量 $var 会在列表中做遍历,并且遍历出与 $var 对应的样式块。

    这有一个 @each 指令的简单示例:

    $list: adam john wynn mason kuroir;//$list 就是一个列表
    
    @mixin author-images {
        @each $author in $list {
            .photo-#{$author} {
                background: url("/images/avatars/#{$author}.png") no-repeat;
            }
        }
    }
    
    .author-bio {
        @include author-images;
    }

    编译出 CSS:

    .author-bio .photo-adam {
      background: url("/images/avatars/adam.png") no-repeat; }
    .author-bio .photo-john {
      background: url("/images/avatars/john.png") no-repeat; }
    .author-bio .photo-wynn {
      background: url("/images/avatars/wynn.png") no-repeat; }
    .author-bio .photo-mason {
      background: url("/images/avatars/mason.png") no-repeat; }
    .author-bio .photo-kuroir {
      background: url("/images/avatars/kuroir.png") no-repeat; }

  • 相关阅读:
    javascript的alert的使用
    UIGestureRecognizer对图像进行缩放、移动、旋转操作
    对开源库使用 AutoCAD 文件格式
    计算机图形学常用算法
    KMP字符串模式匹配详解
    C++面试题String函数实现
    c++虚函数解析
    c++内存分配
    win32编程入门
    C++中Int转换成String
  • 原文地址:https://www.cnblogs.com/burningmyself/p/6905720.html
Copyright © 2020-2023  润新知