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


#やりたいこと

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

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

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


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

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

```html
    <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>
```

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

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

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

```scss
  .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;
        }
      }
    }
  }
```

## 完成

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

![FireShot Capture 101 - nieve-test - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165366/658e86d4-e741-dece-710c-5955dc92a570.png)

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

**さて、ここからが本題。**

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

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

```html
    <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の色の設定を配列にしたのよ、今回は↓。

```scss
$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()`で展開します。
※色にかかわるところ以外盛大に省略

```scss
.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%);
    }
  }
}
```

## 完成



![FireShot Capture 123 - nieve-test - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165366/bbd47206-dc57-4131-9956-f318a5d86798.png)


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


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

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

```html
    <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>
```

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


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

```scss
$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([配列名], [プロパティ名])`で、各項目の値を取得。
※配列に設定したものにかかわるところ以外盛大に省略

```scss
  .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");
          }
        }
      }
    }
  }
```

##完成

![FireShot Capture 109 - nieve-test - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165366/a97d68e1-ee66-43a4-0e54-ce29d3fe6199.png)


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


#おわり

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