你的位置:首页 > 网页设计

[网页设计]Sass的控制命令(循环)


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

 1 $lte7: true; 2 $type: monster; 3 .ib{ 4   display:inline-block; 5   @if $lte7 { 6     *display:inline; 7     *zoom:1; 8   } 9 }10 p {11   @if $type == ocean {12     color: blue;13   } @else if $type == matador {14     color: red;15   } @else if $type == monster {16     color: green;17   } @else {18     color: black;19   }20 }

编译成CSS:

1 //css style2 .ib{3   display:inline-block;4   *display:inline;5   *zoom:1;6 }7 p {8   color: green; 9 }

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

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

编译出来的CSS:

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

 

 

 

@for循环(上)
在 Sass 的 @for 循环中有两种方式

@for $i from <start> through <end>@for $i from <start> to <end>

  • $i 表示变量
  • start 表示起始值
  • end 表示结束值

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

从 <start> 开始循环,到 <end> 结束
如下代码,使用through关键字的例子:

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

编译出来的 CSS:

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

从 <start> 开始(此处示例是1),一直遍历到 <end> (此处示例是3)。包括 <end> 的值。

to关键字的例子:

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

编译出来的 CSS:

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

循环从 <start> 开始,一直遍历循环到 <end> 结束。这种形式的循环只要碰到 <end> 就会停止循环(将不会遍历 <end> 值)。

@for循环(下)

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

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

编译出来的 CSS:

 1 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { 2   float: left; 3   margin-left: 10px; 4   margin-right: 10px; 5 } 6 .span1 { 7   width: 60px; 8 } 9 .span2 {10   width: 140px;11 }12 .span3 {13   width: 220px;14 }15 .span4 {16   width: 300px;17 }18 .span5 {19   width: 380px;20 }21 .span6 {22   width: 460px;23 }24 .span7 {25   width: 540px;26 }27 .span8 {28   width: 620px;29 }30 .span9 {31   width: 700px;32 }33 .span10 {34   width: 780px;35 }36 .span11 {37   width: 860px;38 }39 .span12 {40   width: 940px;41 }

 @for 循环指令除了可以从小数值到大数值循环之外,还可以从大数值循环到小数值。而且两种形式都支持(递增或递减)

 

 

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

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

编译出来的 CSS:

 1 .while-4 { 2   width: 24px; 3 } 4 .while-3 { 5   width: 23px; 6 } 7 .while-2 { 8   width: 22px; 9 }10 .while-1 {11   width: 21px;12 }

 

 

 

@each循环

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

@each $var in <list>

 $var 就是一个变量名, <list> 是一个SassScript表达式,他将返回一个列表值。变量 $var 会在列表中做出遍历,并且遍历出与 $var 对应的样式块
这有一个 @each 指令的简单示例:

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

编译出CSS:

 1 .author-bio .photo-adam { 2   background: url("/images/avatars/adam.png") no-repeat; 3 } 4 .author-bio .photo-john { 5   background: url("/images/avatars/john.png") no-repeat;  6 } 7 .author-bio .photo-wynn { 8   background: url("/images/avatars/wynn.png") no-repeat;  9 }10 .author-bio .photo-mason {11   background: url("/images/avatars/mason.png") no-repeat; 12 }13 .author-bio .photo-kuroir {14   background: url("/images/avatars/kuroir.png") no-repeat; 15 }