🥨

sass(scss)の制御構文について

に公開
CSS
Sass
Scss
tech

Sassの制御構文とは

Sass (SCSS) の制御構文は、通常のプログラミングと同様に、スタイルシートの上から下への処理の流れを制御するために用いられます。これらは、コードの再利用性と保守性を劇的に高めるディレクティブとして機能します。

「同じようなスタイルを何度も書くのが面倒だ」「PCとSPでスタイルを動的に切り替えたい」といった悩みを、Sassの制御構文を使えば、プログラミングのようにロジックを組み込むことで解決できます。

1.繰り返し (ループ) (@for, @each, @while)

似たようなスタイルを複数回、自動で生成するために使用します。

@for: 回数指定の繰り返し

@forは開始値から終了値まで、指定した回数だけ繰り返します。要素の連番やグリッドの作成に便利です。

キーワード 目的
through 終了値を含めて繰り返します。（例: 1から5まで）
to 終了値の直前まで繰り返します。（例: 1から4まで） 
// .z-index-1 から .z-index-5 までを生成
@for $i from 1 through 5 {
  .z-index-#{$i} {
    z-index: $i;
  }
}

//生成されるCSS
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.z-index-3 {
  z-index: 3;
}
.z-index-4 {
  z-index: 4;
}
.z-index-5 {
  z-index: 5;
}

@each: リストやマップの要素を反復

配列（リスト）や連想配列（マップ）の要素を一つずつ取り出して処理します。

種類 目的
リスト リストの各要素を順番に変数に代入して繰り返します。
マップ マップのキーと値の両方を同時に変数に代入して繰り返します。 
$colors: (
  red: #c0392b,
  green: #27ae60,
  blue: #2980b9
);

@each $name, $hex in $colors {
  .text-#{$name} {
    color: $hex;
  }
}

// 生成されるCSS
.text-red {
  color: #c0392b;
}

.text-green {
  color: #27ae60;
}

.text-blue {
  color: #2980b9;
}

@while: 条件が真である限り実行

条件式が真である限り、コードブロックを繰り返し実行します。変数のインクリメントなど、ループを制御するロジックを必ず含める必要があります。

$i: 1;
@while $i <= 3 {
  .item:nth-child(#{$i}) {
    opacity: 0.2 * $i;
  }
  $i: $i + 1;
}

// 生成されるCSS
.item:nth-child(1) {
  opacity: 0.2;
}

.item:nth-child(2) {
  opacity: 0.4;
}

.item:nth-child(3) {
  opacity: 0.6;
}

2.条件分岐 (@if, @else if, @else)

@ifは条件に応じて処理やスタイルを切り替える制御構文です。
@else ifや@elseを組み合わせることで、条件に応じた柔軟な分岐が可能になります。

ディレクティブ 目的
@if 条件が真の場合に実行します。
@else if 最初の @if が偽で、次の条件が真の場合に実行します。
@else すべての条件が偽の場合に実行します。 
$component-type: 'primary';

.button {
  @if $component-type == 'primary' {
    background-color: blue;
  } @else if $component-type == 'secondary' {
    background-color: green;
  } @else {
    background-color: gray;
  }
}

//生成されるCSS
.button {
  background-color: blue;
}

上記のコードでは変数の$component-typeが'primary'に設定されているため、@ifブロックの最初の条件式がtrue となり、background-color: blue;のみが適用されます。@else ifや@elseのブロックは無視されます。

3.関数の定義 (@function, @return)

複雑な計算をカプセル化し、値を返す独自の関数を定義します。これにより、スタイルシート全体で計算ロジックを再利用できます。

ディレクティブ 目的
@function 新しい関数を定義します。
@return 関数の実行結果として、値を返します。 
// px値をem値に変換する関数
@function pixel-to-em($pixel-val, $base-font-size: 16px) {
  @return $pixel-val / $base-font-size * 1em;
}

.box {
  // 関数を呼び出し、計算結果を適用
  font-size: pixel-to-em(24px); // => font-size: 1.5em; にコンパイル
}

Discussion