Sassの高度な使い方(2)

前編ではSassの日常的な使い方を紹介しましたが、今日はSassの高級な使い方を紹介します.これはcssを書く印象を覆すことになります.
じょうけんステートメント
判断:@ifと@else@ifの式の戻り値がtrueの場合、{}内のコードを出力

div {
  @if 1 + 1 == 2 { border: 1px #ccc solid; }
  @if 5 < 3 { border: 2px #f00 solid; }
}

//   

div {
  border: 1px #ccc solid; 
}

@ifと@elseを組み合わせて使用できます

$type: sass;
p {
  @if $type == css { color: blue; }
  @else $type == sass { color: red; } 
}
 
//   

p { color: red; }

ループステートメント
@for:@for$var from through、または@for$var from toの2つのフォーマットがあります.

@for $num from 1 through 3 {
  .list-#{$num} { width: 200px * $num; }
}

//   

.list-1 { width: 200px; }
.list-2 { width: 400px; }
.list-3 { width: 600px; }

上記の例を@for$num from 1 to 3に置き換えるとどうなるでしょうか

@for $num from 1 to 3 {
  .list-#{$num} { width: 200px * $num; }
}

//   

.list-1 { width: 200px; }
.list-2 { width: 400px; }

throughを使用すると、条件範囲には和の値が含まれ、toを使用すると条件範囲に含まれない値だけが含まれます.また、$varは任意の変数であってもよい.とは整数値でなければなりません.
@while:式がfalseに戻るまで出力フォーマットを繰り返します.

$num: 6;
@while $num > 0 {
  .list-#{$num} { width: 200px * $num; }
  $num: $num - 2;
}

//   

.list-6 { width: 1200px; }
.list-4 { width: 800px; }
.list-2 { width: 400px; }

@each:命令のフォーマットは$var inであり、$varは任意の変数名、一連の値、すなわち値リストであってもよい.@eachは変数$varを値リストの各項目に作用させ、結果を出力します.

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
//   

.a { background-image: url("/image/a.jpg"); }
.b { background-image: url("/image/b.jpg"); }
.c { background-image: url("/image/c.jpg"); }

カスタム関数
sassでは、自分の具体的なニーズに応じて関数を記述するために使用されます.

@function count($n) {
  @return $n * 100;
}
div {
  width: count(5px);
}

//   

div { width: 500px; }