the onishimemo

Sassでマップをネストしてeachで回す

Web

Sassを書いているとき、JSの癖でよくマップをネストして使います。多次元連想配列的?みたいな。

変数の可読性は上がる(と思う)のですが、ループで参照する際にややこしくなって、毎回やり方を調べる羽目になるのでいい加減メモしておきます。

ループ中にインデックス値を参照する場合は、もともと用意されているindex関数を使います。nth-childで指定する時に便利。

$pokemon:(
  poke1: (
    name: 'pikachu',
    height: .4
  ),
  poke2: (
    name: 'onidoriru',
    height: 1.2
  )
);
@each $key, $obj in $pokemon {
  $i: index($pokemon, $key $obj);
  .item-:nth-child(#{$i}) {
    height: map-get(map-get($pokemon, $key), height) * 100%;
    &::before {
    content: map-get(map-get($pokemon, $key), name);
    }
  }
}

蛇足ですが、インデックスが要らない場合はこう。

@each $key, $obj in $pokemon {
  .item-#{$key} {
    height: map-get(map-get($pokemon, $key), height) * 100%;
    &::before {
    content: map-get(map-get($pokemon, $key), name);
    }
  }
}

でもこれ呼び出しの際の可読性はあんまり良くないんですよね。
map-getがネストすると正直訳が分からなくなります。上の例では1つだけしかネストしていませんが、実際の案件ではもう少し階層が深くなるときもあります。

なので、複数人で作業する場合はあまり使わないほうが良いかなーと思っています。もっとスマートなやり方はないかなぁ。

こういう記事を書くために始めたブログでしたが、気づけばカレーの話ばかりになってました。

/