Edited at

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

More than 3 years have passed since last update.


概要

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文はこの記事のような使い方をするものではありません(免罪)