@if
@if
指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if
之,还可以配合 @else if
和 @else
一起使用。
1 | /** SCSS **/ |
编译后的css:
1 | .block { |
@for循环
Sass 的 @for
循环中有两种方式:
1 | @for $i from <start> through <end> |
$i
表示变量start
表示起始值end
表示结束值
这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。
1 | /** SCSS------网格系统生成各个格子 **/ |
编译出css:
1 | .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { |
@while
循环
1 | /** SCSS **/ |
编译出css:
1 | .while-4 { |
@each
循环
@each
循环就是去遍历一个列表,然后从列表中取出对应的值。@each
循环指令的形式:@each
$var
in <list>
$var
就是一个变量名,<list>
是一个 SassScript 表达式,他将返回一个列表值。变量 $var
会在列表中做遍历,并且遍历出与 $var
对应的样式块。
1 | $list: adam john wynn mason kuroir;//$list 是一个列表 |
编译出 CSS:
1 | .author-bio .photo-adam { |
关注 web翎云阁,定时推送,互动精彩多,若你有更好的见解,欢迎留言探讨!