SCSSのマップ型変数と繰り返し処理でModifierを一括でつくる

17364 ワード
HTML flocss HTML5 scss bem HTML テキストリンク

今までカラーを変数化するくらいしかやってませんでしたがマップ型変数と繰り返し処理をすれば一括でModifierを作れることに気づいたので備忘録。

変数のおさらい

色コードを変数にするだけ

ただの変数
// ---------------------------------------------------------
// theme color
// ---------------------------------------------------------
$primary: #248888;
$warning: #F0D879;
$danger: #E7475E;

.c-button{
  padding: 0 1em;
  line-height: 24px;
  border-radius: 4px;
  border: 1px solid;
  &--primary{
    background-color: $primary;
  }
  &--warning{
    background-color: $warning;
  }
  &--danger{
    background-color: $danger;
  }
}

マップ型変数

名前（key）、対する値（value）のセットをマップの中に入れる。
カラー名(primary)に対するカラーコード名(#248888)のセットを、$theme-colorsというマップのなかに入れる。

マップ型変数
// ---------------------------------------------------------
// theme color map
// ---------------------------------------------------------
$theme-colors: (
  "primary": #248888,
  "warning": #F0D879,
  "danger": #E7475E,
);

$マップ名: (
  名前1: 値1,
  名前2: 値2
);

変数+マップ型変数

マップ型変数にカラーコード名を直接かかず、先に変数にしてマップ型変数にいれることで、変数は変数として独立して使えるように。

変数+マップ型変数
// ---------------------------------------------------------
// theme color
// ---------------------------------------------------------
$primary: #248888;
$warning: #F0D879;
$danger: #E7475E;

// ---------------------------------------------------------
// theme color map
// ---------------------------------------------------------
$theme-colors: (
  "primary": $primary,
  "warning": $warning,
  "danger": $danger,
);

繰り返し処理

@eachで繰り返し処理をする。

繰り返し処理
// ---------------------------------------------------------
// theme color map
// ---------------------------------------------------------
$theme-colors: (
  "primary": $primary,
  "warning": $warning,
  "danger": $danger,
);

.c-button{
  padding: 0 1em;
  line-height: 24px;
  border-radius: 4px;
  border: 1px solid;
  // 繰り返し処理
  @each $name, $color in $theme-colors {
    &--#{$name} {
      background-color: $color;
    }
  }
}

@each $name, $color in $theme-colorsでは
$theme-colorsの中の、
keyであるカラー名を$nameという変数名に。
valueであるカラコードの変数を$colorという変数名に。

処理内で使う名前をつけてあげてるイメージ。

$nameはクラス名に使うので#{}でかこむ。
$colorはbackground-colorの値に。

そして下記を生成してくれる。

&--primary{
  background-color: $primary;
}
&--warning{
  background-color: $warning;
}
&--danger{
  background-color: $danger;
}

マップ型変数を入れ子に

例えばサイズ違いのボタンを作るとき、クラス名、widthとheightを変えたいときなどにつかえる。
２つ以上のプロパティ違いを作成するときに使える。

マップ型変数を入れ子で使う（map-get関数）
// 変数を作成
// ---------------------------------------------------------
// button size
// ---------------------------------------------------------
$button-large-width: 480px;
$button-large-height: 42px;
$button-small-width: 160px;
$button-small-height: 24px;

// マップ型変数を入れ子で作成
// ---------------------------------------------------------
// button size map
// ---------------------------------------------------------
$button-sizes: (
  "large" :(
    "width": $button-large-width,
    "height": $button-large-height,
  ),
  "small" :(
    "width": $button-small-width,
    "height": $button-small-height,
  )
);

widthまたはheightに対する、サイズ(px)のセットが
largeというマップのなかに入っている。
さらにlargeとsmallのマップが$button-sizesの中に入ってる。

$マップ名: (
  $入れ子マップ名1: (
    名前1: 値1,
    名前2: 値2
  ),
  $入れ子マップ名2: (
    名前3: 値3,
    名前4: 値4
  )
);

繰り返し処理でmap-get()関数を使う

// マップ型変数を入れ子で作成
// ---------------------------------------------------------
// button size map
// ---------------------------------------------------------
$button-sizes: (
 "large" :(
    "width": $button-large-width,
    "height": $button-large-height,
  ),
  "small" :(
    "width": $button-small-width,
    "height": $button-small-height,
  )
);

// @eachで繰り返し処理、map-get関数で入れ子のマップ型変数を使う
.c-button{
  // ~~ その他のプロパティは省略 ~~
  @each $name, $sizes in $button-sizes { //…①
    &--#{$name} {
      height: map-get($sizes, "height");  //…②
      line-height: map-get($sizes, "height");
      width: map-get($sizes, "width");
    }
  }
}

下記が生成される

&--large {
  height: 42px;
  line-height:42px;
  width: 480px;
}
&--small {
  height: 24px;
  line-height:24px;
  width: 160px;
}

①入れ子マップの繰り返し処理

繰り返し処理ではlargeが$name、
()内の"width": $button-large-width,"height": $button-large-height,が$sizesとなる。

②map-get関数について

$マップ名: (
  名前0: 値0,
  $入れ子マップ名1: (
    名前1: 値1,
    名前2: 値2
  )
);

上記のようなマップの場合は
map-get($マップ名, 名前0)→値0を取得
map-get($入れ子マップ名1, 名前1)→値1を取得
になる。

繰り返し処理内のmap-get($sizes, "height")の場合は$button-large-heightと$button-small-heightを取得する。

CodePen

See the Pen Untitled by himeka223 (@himeka223) on CodePen.

なんとなく知ってたけど、コーディングに全く使ってなかった…
調べてみたら結構かんたんだった…もっと早く使っときゃよかった。

管理画面とかModifierがめっちゃあるときかなり使えるし、整理されてコードもコンパクトになりそう。
これからガシガシ使っていきたい