Sassで配列を入れ子にしたくなった

やりたいこと

まあ、タイトルの通りです。
ループして使いたいものとか、変数の整頓上、入れ子にしたかったんです。

とりあえず、こんな色の変数たちでも置いておかせてください。

$c-black: #232323;
$c-green_g: #9cbd7b;
$c-orange_g: #c2895b;
$c-blue_g: #87b5c9;
$c-red_g: #d18cb7;

そも、ふつうに配列のループ（連想配列）

あるところに、こんな↓ボタンがありました。

    <div class="buttons">
      <button class="button c_main"><span class="inner">button</span></button>
      <button class="button c_sub"><span class="inner">button</span></button>
      <button class="button c_denger"><span class="inner">button</span></button>
    </div>

こんな↓感じで色を連想配列にします。

$c-pattern: (
  main: $c-green_g,
  sub: $c-blue_g,
  denger: $c-red_g
);

こんな↓感じで配列を@eachで展開します。
※色にかかわるところ以外盛大に省略

  .button {
    position: relative;
    border: 1px solid $c-black;
    color: $c-black;
    &:after {
      content: "";
      display: block;
    }
    @each $pattern, $color in $c-pattern {
      &.c_#{$pattern} {
        &:after {
          background: $color;
        }
      }
    }
  }

完成

こんなボタンができました。
お手軽に色のパターンができました～

カテゴリーのアイコンを色わけするときとかに便利よね。

さて、ここからが本題。

値に配列を持たせたかったんです

あるところに、こんな↓ボタンがありました。

    <div class="buttons">
      <button class="button c_main"><span class="inner">button</span></button>
      <button class="button c_sub"><span class="inner">button</span></button>
      <button class="button c_denger"><span class="inner">button</span></button>
    </div>

…前のと同じやん。
でも、Sassの色の設定を配列にしたのよ、今回は↓。

$c-pattern_multi: (
  main: ($c-blue_g, $c-green_g, $c-orange_g),
  sub: ($c-green_g, $c-blue_g, $c-red_g),
  denger: ($c-red_g, $c-orange_g, $c-green_g)
);

で、こんな↓感じで配列を@eachとnth()で展開します。
※色にかかわるところ以外盛大に省略

.button {
  color: #fff;
  @each $pattern, $props in $c-pattern_multi {
    &.c_#{$pattern} {
      background: linear-gradient(0deg, nth($props, 1) 0%, nth($props, 2) 50%, nth($props, 3) 100%);
    }
  }
}

完成

これは、nth()を使って配列のｘ番目を指定したけど、@eachを入れ子に使ってもなにかできるよね～、きっと。ちょっと今思いつかないけど。

連想配列を入れ子してみたい

あるところに、こんな↓ボタンがありました。

    <div class="buttons">
      <button class="button c_main"><span class="inner">button</span></button>
      <button class="button c_sub"><span class="inner">button</span></button>
      <button class="button c_denger"><span class="inner">button</span></button>
    </div>

…いや、一緒だから、前のと。

で、今回は設定を連想配列の入れ子にしました↓。

$c-pattern_icon: (
  main: (
    icon: "★",
    icon-color: #ffec42,
    bg-color: $c-green_g
  ),
  sub: (
    icon: "▲",
    icon-color: #2738ce,
    bg-color: $c-blue_g
  ),
  denger: (
    icon: "◆",
    icon-color: #db1863,
    bg-color: $c-red_g
  )
);

。。。なぜか、いきなり色を直接指定ってね。

そして、展開↓。
@eachでループしながら、map-get([配列名], [プロパティ名])で、各項目の値を取得。
※配列に設定したものにかかわるところ以外盛大に省略

  .button {
    @each $pattern, $props in $c-pattern_icon {
      &.c_#{$pattern} {
        background-color: map-get($props, "bg-color");
        .inner {
          &:before {
            content: map-get($props, "icon");
            color: map-get($props, "icon-color");
          }
        }
      }
    }
  }

完成

ふむ。SNSシェアアイコンとかの、アイコンとブランドカラーの設定とかに使うと便利そう。

おわり

ふと思い立って、配列の入れ子をやってみましたとさ。
おしまい。