【个人提升】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 fromthrough@for $i fromto•$i 表示变量•start 表示起始值•end 表示结束值这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。如下代码，先来个使用 through 关键字的例子：@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}编译出来的 CSS:.item-1 { width: 2em;}.item-2 { width: 4em;}.item-3 { width: 6em;}再来个 to 关键字的例子：@for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; }}编译出来的 CSS:.item-1 { width: 2em;}.item-2 { width: 4em;}@for循环 （下）上一小节的那个实例几乎用不着，哈哈，所以其实是没什么营养的东西，只是帮助理解了原来 @for 是这么回事。怎么的也不能就这么忽悠大家啊，大家好不容易抽空看下文章，就这么点扯淡的东西怎么对得住呢。下面再来个营养级别的，@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;}@for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $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 { 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;}将上面的示例稍做修改，将 @for through 方式换成 @for to:：//SCSS@for $i from 1 to 13 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } }其最终编译出来的 CSS 代码和上例所编译出来的一模一样。这两段 Sass 代码并无太多差别，只是 @for中的取值不同。配合 through 的值是 12，其遍历出来的终点值也是 12，和值一样。配合 to 的值是 13，其遍历出来的终点值是 12，就是对就的值减去 1 。@while循环@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。这里有一个 @while 指令的简单用例：//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 循环指令的形式：@each $var in如果你没有接触过列表，也不要紧，他也非常简单。在下面的例子中你可以看到，$var 就是一个变量名， 是一个 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; }