【Sass】配列を@each文でリストとして出力

概要

each文を使って配列を繰り返し処理して、
スタイルを生成、<ul><li></li></ul> にテキストとして出力。

単に用意されている<li></li>にCSSでテキストを出力しているだけで、別に動的に出力しているわけでは無いんですけどね・・・。

内容

HTML

html

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

SCSS

scss

// 配列 
$values: Curtis Wilbur, John S McCain, Fitzgerald, Lassen, McCampbell, Mustin;

ul{
    @each $value in $values {
        $key: index($values, $value);
        li:nth-child(#{$key}):before{
            content: '#{nth($values, $key)}';
        }
    }
}

上記のコードをコンパイルすると、こういう形で出力されます。

css

ul li:nth-child(1):before {content: "Curtis Wilbur";}
ul li:nth-child(2):before {content: "John S McCain";}
ul li:nth-child(3):before {content: "Fitzgerald";}
ul li:nth-child(4):before {content: "Lassen";}
ul li:nth-child(5):before {content: "McCampbell";}
ul li:nth-child(6):before {content: "Mustin";}

ブラウザで見るとこうなります。

・Curtis Wilbur
・John S McCain
・Fitzgerald
・Lassen
・McCampbell
・Mustin

簡単に手順説明

まず、配列を定義します。

// 配列 
$values: Curtis Wilbur, John S McCain, Fitzgerald, Lassen, McCampbell, Mustin;

配列はコンマか半角スペースを入れることで定義できます。

$key: index($values, $value);

$key に数値を定義。

nth($values, $index_key)

で、配列の値を取得して、プロパティのcontent:''で出力します。

ちなみに

scss

ul{
    @each $value in $values {
        $key: index($values, $value);
        li:nth-child(#{$key}):before{
            content: '#{nth($values, $key)}';
        }
    }
}

// 配列 
$values: Curtis Wilbur, John S McCain, Fitzgerald, Lassen, McCampbell, Mustin;

配列が後ろにきても大丈夫。

ちなみに、ちなみに

each文はこの記事のような使い方をするものではありません（免罪）