Sass语法(三)之循环

一、数据类型

1.数字

如,1、 2、 13、 10px;

2.字符串

 有俩种类型:

a.有引号字符串 (quoted strings),如 "Lucida Grande" 、'http://sass-lang.com';
b.无引号字符串 (unquoted strings),如 sans-serifbold。

编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。

3.颜色(blue,#04a3f9)

4.布尔型(true,false)

5.空值:null

6.值列表

值列表是指用空格或者逗号分隔的一系列的值,如,margin: 10px 15px 0 0或是font-face: Helvetica, Arial, sans-serif


二、控制命令

1. 条件语句-@if

@if可以用来判断:

p {
        @if 1 + 1 == 2 { border: 1px solid; }
        @if 5 < 3 { border: 2px dotted; }
      }

配套的还有@else命令:


@if lightness($color) > 30% {
        background-color: #000;
      } @else {
        background-color: #fff;
      }

2. 循环语句

①for循环

在 Sass 的 @for 循环中有两种方式:

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

a. @for $i from <start> through <end>

//scss

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

编译出来的 CSS:
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}


b.@for $i from <start> to <end>

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

c.@for应用在网格系统生成各个格子 class 

//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}

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

//to
@for $i from 1 to 5 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
编译出来的 CSS:
.span1, .span2, .span3, .span4{
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}

②while循环

执行表达式,并且会生成不同的样式块,直到表达式值为 false 时停止循环.
@while 后面的条件为 true 就会执行.

//SCSS
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
编译出来的 CSS
.while-4 {
  width: 24px;
}
.while-3 {
  width: 23px;
}
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}

③each循环

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

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

$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; }



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值