SCSSでswitch文を使用

SCSSでswitch文を使用

SCSS自体にはJavaScriptや他のプログラミング言語のようなswitch文が直接サポートされていません。
しかし、似たような機能を実現するためには、SCSSの@mixinや@function、@ifディレクティブを使うことができます。
以下に、SCSSでswitch文のような動作を模倣する方法を説明します。

SCSSでのswitch文の模倣

1. Mixinを使用した方法:
@mixinを使用して、異なるスタイルを条件に応じて適用することができます。

@mixin test-switch($value) {
  @if $value == 'primary' {
    background-color: blue;
    color: white;
  } @else if $value == 'secondary' {
    background-color: gray;
    color: black;
  } @else if $value == 'success' {
    background-color: green;
    color: white;
  } @else {
    background-color: black;
    color: white;
  }
}

.test-button {
  @include test-switch('primary');
}

この例では、test-switchミキシンが$valueに基づいて異なる背景色とテキスト色を設定します。
例えば、'primary'が渡されると、ボタンは青い背景と白い文字になります。

2. Functionを使用した方法:
関数を使って値を返し、その値をプロパティに適用することもできます。

@function test-switch-color($value) {
  @if $value == 'primary' {
    @return blue;
  } @else if $value == 'secondary' {
    @return gray;
  } @else if $value == 'success' {
    @return green;
  } @else {
    @return black;
  }
}

.test-button {
  background-color: test-switch-color('secondary');
  color: white;
}

この方法では、test-switch-color関数が$valueに基づいて色を返します。
この色はそのままbackground-colorプロパティに適用されます。

SCSSでの条件分岐を活用する例

実際に、複数のスタイル条件を一度に処理する必要がある場合、複数の@ifを組み合わせることで、ある種のswitch文のような構造を作成できます。
たとえば、以下のように、サイズとタイプによってスタイルを切り替えることも可能です。

@mixin test-button-styles($type, $size) {
  @if $type == 'primary' {
    background-color: blue;
    color: white;
  } @else if $type == 'secondary' {
    background-color: gray;
    color: black;
  }

  @if $size == 'large' {
    padding: 10px 20px;
    font-size: 18px;
  } @else if $size == 'small' {
    padding: 5px 10px;
    font-size: 12px;
  }
}

.test-button {
  @include test-button-styles('primary', 'large');
}

このコードでは、test-button-stylesミキシンが$typeと$sizeに基づいてスタイルを適用します。
例えば、primaryかつlargeのボタンは青い背景で大きなサイズのスタイルになります。

このように、SCSSではswitch文に相当する機能を@ifディレクティブや@mixin、@functionを使って実現できます。
各ケースで適切な方法を選択し、コードの可読性や再利用性を高めることができます。