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;
}
二、循環(huán)語句 @for
@for $i from <start> through <end> // 包括end這個數(shù)
@for $i from <start> through <end> // 不包括end這個數(shù)
栗子：
$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;
????}
}
三、循環(huán)語句 @while
栗子：
// scss
$types: 4;
$type-width: 20px;
@while $types > 0 {
????.while-#{$types} {
? ? ? ? width: $type-width + $types;
????}
? ? $types: $types -1;
}
四、循環(huán)語句 @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; }
