SCSSのループ

for ループ

@for $idx from 1 through 10 {
  .selector-#{$idx} {
    margin: #{$idx}px;
  }
}

each ループ

配列を定義して要素でループしたい場合には @each が便利です。

$colors: red, blue, yellow;

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

連想配列を利用した each ループ

連想配列を利用すると key を含めたループが可能です。

$colors: (
  light: #ffffff,
  dark: #000000,
);

@each $theme, $color in $colors {
  .theme-#{$theme} {
    color: $color;
  }
}

使用例

テーマカラーの定義

テーマカラーを連想配列で定義すると色の管理が非常にやりやすくなります。特に、ダークモードを実装するような場合には複数のテーマを 同じキーを使用して 定義することで、同じキーに複数の色を割り当てることができます。

$light-colors: (
  primary: #ffffff,
  secondary: #f3f3f3,
  ......
);

$dark-colors: (
  primary: #000000,
  secondary: #090d18,
  ......
);

.light {
  @each $theme, $color in $light-colors {
    --#{$theme}: $color;
  }
}

.dark {
  @each $theme, $color in $dark-colors {
    --#{$theme}: $color;
  }
}

この場合、例えば color: var(--primary); というプロパティを当てると、light クラスがアクティブな場合には白色が、dark クラスがアクティブな場合には黒色が割り当てられるようになります。

mixin と合わせてスタイルを生成

mixinを使用するとスタイルを共通化できます。これで定義した共通のスタイルをループさせることで、類似のスタイルを効率的に生成することが可能です。

@mixin common-style($color) {
  background-color: $color;
  margin: 10px;
  ......
}

$colors: (
  primary: #ffffff,
  secondary: #f3f3f3,
  ......
);

@each $theme, $color in $colors {
  .style-#{theme} {
    @include common-style($color);
  }
}

おわりに

@function と合わせるなど、SCSSのループ構文は複雑なスタイルをスマートに定義するために幅広く活用できそうです。機会があればいろいろなパターンを試してみたいと思います。