Scss的控制命令
一、条件语句 @if
@if
@if @else
@if @else if @else
栗子：
@mixin blockOrHidden($boolean:true) {
@if $boolean {
display: block;
} @else {
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden {
@include blockOrHidden(false);
}
// css
.block {
display: block;
}
.hidden {
display: none;
}
二、循环语句 @for
@for $i from <start> through <end> // 包括end这个数
@for $i from <start> through <end> // 不包括end这个数
栗子：
$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;
}
}
三、循环语句 @while
栗子：
// scss
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types -1;
}
四、循环语句 @each
@each $var in <list>
栗子：
$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; }
