Sassの主な機能(2)
制御構文
Sassでは、条件分岐や繰り返しといった制御をCSSに反映することができます。今回は、よく利用する条件分岐と繰り返しの構文を紹介します。
条件分岐
@if 条件1 { 条件1が成立した場合(条件1がtrue)の処理 } @else if 条件2 { 条件2が成立した場合(条件2がtrue)の処理 } @else { 条件1、条件2が成立しなかった場合の処理 }
$name : caption; //変数nameにcaptionを設定する $is-title : true; //変数is-titleにtrueを設定する $caption-number : 1; //変数caption-numberに1を設定する a{ //----条件について----// //条件 A == BでAとBが同一であれば条件成立です //変数nameがtitleという値だったら条件成立 @if $name == title { font-size:20px; //変数nameがcaptionという値の場合 } @else if $name == caption { font-size:15px; $is-title : false;//変数is-titleにfalseを設定する //変数nameがtitleでもcaptionでもない場合 } @else { font-size:10px; } } #title { @if $is-title { //変数is-titleがtrueか color:green; } @else { //変数is-titleがfalseの場合 color:black; $caption-number : 2; } } .caption{ //----条件について----// //A != B でAとBが等しくないときに条件成立 します //A and Bで「AかつB」AB両方trueで条件成立、A or Bで「AまたはB」ABどちらかがtrueで条件成立です //A >= 2 でAが2以上で条件成立 同様に「<=」「>」「<」が使用可能です //変数caption-numberが0 かつ 2以上で条件成立 @if $caption-number != 0 and $caption-number >= 2 { font-weight:bold; } }
a { font-size: 15px; } #title { color: black; } .caption { font-weight: bold; }
繰り返し
その1 @for 値を代入する変数名 from 開始値 to 終了値{ 処理 } その2 @for 値を代入する変数名 from 開始値 through 終了値{ 処理 } その3 @while 条件{ 処理 } その4 @each 値を代入する変数名 in リスト{ 処理 }
/* 繰り返し処理その1 */ //変数valueの値が1から開始して3未満になるまで繰り返す @for $value from 1 to 3 {// 1~3までの値を変数valueに代入する .capton#{$value}{ //文字列と変数を連結するときは変数を「#{}」で括る padding:#{$value}px; } } /* 繰り返し処理その2 */ $total : 0; .caption{ //変数valueの値が1から開始して3以下になるまで繰り返す @for $value from 1 through 3 { $total : $total + $value; //変数totalに変数valueの値を加えて変数valueに代入する } padding : #{$total}px; //変数valueの合計(1 + 2 + 3) } /* 繰り返し処理その3 */ //変数valueの値が10から開始して30未満になるまで繰り返す $value : 10; @while $value < 30{ .capton#{$value}{ padding:#{$value}px; } $value : $value + 10; //変数valueに10を加えて変数valueに代入する } /* 繰り返し処理その4 */ //変数color-listの値分だけ繰り返す $color-list : red, green, black; //redとgreenとblackを値として設定する @each $color in $color-list { //red→green→blackの順で変数colorに代入 .#{$color}{ color : $color; } }
/* 繰り返し処理その1 */ .capton1 { padding: 1px; } .capton2 { padding: 2px; } /* 繰り返し処理その2 */ .caption { padding: 6px; } /* 繰り返し処理その3 */ .capton10 { padding: 10px; } .capton20 { padding: 20px; } /* 繰り返し処理その4 */ .red { color: red; } .green { color: green; } .black { color: black; }