Help us understand the problem. What is going on with this article?

Sassの@each内でインデックスキーを取得して別配列の値をセット

More than 5 years have passed since last update.

特定のclass名ごとに、色を変えたい・・・といったケースでの話。
連想配列や多次元配列が使えないようなので、とりあえず思いついた方法をメモ。

手順.1


同じ長さの配列を2つ定義

// Sass
$category_names: categoryA, categoryB, categoryC, categoryD;
$category_colors: #000, #f00, #0f0, #00f;

手順.2


each文で、配列:$category_namesの値をclass名にセットしつつ、配列:$category_colorsの値で文字色に挿入

// Sass
@each $class_name in $category_names {
    $index_key: index($category_names, $class_name);

    .#{$class_name} {
        color: nth($category_colors, $index_key);
    }
}

インデックスキーは

index(配列名, キーを取得したい値);

値は

nth(配列名, インデックスキー);

で、それぞれ取得

出力されたコードは、下記のようになる

// CSS
.categoryA { color: black; }
.categoryB { color: red; }
.categoryC { color: lime; }
.categoryD { color: blue; }

その他


@eachのループ外では、任意のインデックスキーを数値指定

.hoge {
    color: nth($category_colors, 1);
}

その際、最初のキーは 0 ではなく 1 から始まる点に注意

参考URL
http://cutupworks.ldblog.jp/archives/12353077.html

bit-part
Craft CMS, MTAppjQuery を中心にビジネスを強力にサポートするツールとしてのwebサイトを提供します
https://bit-part.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away