CSS
Sass

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