Sass制御コマンド(ループ)_html/css_WEB-ITnose

@if
@if ディレクティブは、条件に基づいてスタイル ブロックを処理できる SassScript です。条件が true の場合はスタイル ブロックを返し、そうでない場合は false の場合は別のスタイル ブロックを返します。 @if に加えて、Sass では @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 ループ (パート 1) Sass の
@for ループ内には 2 つの方法があります ：

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

$ i変数を表す

スタートは開始値を表します

end end endは最終値を表します。 end 、および

to

は、 に数値 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 }

> は開始し (この例は 1)、 まで移動します (この例は 3)。 の値が含まれます。

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 }

ループは から開始され、 までループを通過し続けます。この形式のループは、 に到達するとすぐにループを停止します ( の値は走査されません)。

@for ループ (パート 2)

@fo

r グリッド システムに適用され、各グリッド クラスのコードを生成します:

 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: rrリー

@for ループ命令は、小さい値から大きい値にループするだけでなく、大きい値から小さい値にループすることもできます。そして、両方の形式 (増加または減少) がサポートされています

。

@while ループ

@while

ディレクティブも (他のディレクティブと同様に) SassScript 式を必要とし、式の値が

false

になってループを停止するまで、異なるスタイル ブロックを生成します。これは

@for

命令に非常に似ており、@while の後の
条件が true である限り実行されます。 @while 命令の単純な使用例:

 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 }

コンパイル済み CSS:

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 }

@each ループ

@each

ループとは、リストを

トラバース

してから開始することですリストから対応する値を取得します。

@each ループ命令形式:

 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 }

$var は 変数名 、 は リスト値 を返す SassScript
式

です。変数 $var はリスト内で

traverse

を作成し、$var に対応する

style ブロック を走査します。 これは @each ディレクティブの簡単な例です:

@each $var in <list>

コンパイルされた CSS:

 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 }