@if
@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| @mixin blockOrHidden($boolean: true) { @if $boolean { @debug '$boolean is #{$boolean}'; display: block; //当不写参数或者参数为true } @else { @debug '$boolean is #{$boolean}'; display: none; //参数为false } }
.block { @include blockOrHidden; }
.hidden { @include blockOrHidden(false); }
|
编译后的 css:
1 2 3 4 5 6 7
| .block { display: block; }
.hidden { display: none; }
|
@for 循环
Sass 的 @for 循环中有两种方式:
@for $i from <start> through <end>
@for $i from <start> to <end>
- \$i 表示变量
- start 表示起始值
- end 表示结束值
这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| $grid-prefix: span; $grid-width: 60px; $grid-gutter: 20px;
%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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| .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; }
|
@while 循环
1 2 3 4 5 6 7 8 9 10
| $types: 4; $type-width: 20px;
@while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; }
|
编译出 css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .while-4 { width: 24px; }
.while-3 { width: 23px; }
.while-2 { width: 22px; }
.while-1 { width: 21px; }
|
@each 循环
- @each 循环就是去遍历一个列表,然后从列表中取出对应的值。
- @each 循环指令的形式:
- @each \$var in
$var 就是一个变量名, 是一个 SassScript 表达式,他将返回一个列表值。变量 $var 会在列表中做遍历,并且遍历出与 \$var 对应的样式块。
1 2 3 4 5 6 7 8 9 10 11
| $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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .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; }
|
@function
@function 是一个自定义函数,虽然和@maxin 一样都是通过传入变量改变数据,但是与之不同的是@mixin 传入变量要带上前面的类型,比如 width、font-size 等待,而@function 值传数据,这样可以用于多个属性。
1 2 3 4 5 6 7 8 9
| $oneWidth: 10px; $twoWidth: 40px;
@function widthFn($n) { @return $n * $twoWidth + ($n - 1) * $oneWidth; } .leng { width: widthFn(5); }
|
编译出 CSS:
1 2 3
| .leng { width: 240px; }
|