CSSを効率よく記述する「Sass」の主な機能

SassとCompassをつかってCSSを効率作成しよう（2）

Sassの主な機能（2）

制御構文

　Sassでは、条件分岐や繰り返しといった制御をCSSに反映することができます。今回は、よく利用する条件分岐と繰り返しの構文を紹介します。

条件分岐

条件分岐の記載方法

@if 条件1 {
  条件1が成立した場合（条件1がtrue）の処理
} @else if 条件2 {
  条件2が成立した場合（条件2がtrue）の処理
} @else {
  条件1、条件2が成立しなかった場合の処理
}

if.scss

$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; 
  } 
} 

if.css

a {
  font-size: 15px;
}
#title {
  color: black;
}
.caption {
  font-weight: bold;
}

繰り返し

繰り返し処理の記載方法

その1
 @for 値を代入する変数名 from 開始値 to 終了値{
     処理
 }
その2
 @for 値を代入する変数名 from 開始値 through 終了値{
     処理
 }
その3
@while 条件{
    処理
}
その4
@each 値を代入する変数名 in リスト{
    処理
}

for.scss

/*
繰り返し処理その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;
    }
}

for.css

/*
繰り返し処理その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;
}