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

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

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

kingpanda
キングパンダ合同会社 代表。SEOやコンテンツマーケティングなどSEOに関する記事やその他、技術的情報を記事として更新します。各種お問い合わせもTwitter DMなどからお気軽にどうぞ! 採用動画プラットフォーム「ENLIST(エンリスト)」を運営
https://enlist.jp/
king_panda
採用動画プラットフォーム「ENLIST」を運営・開発しています。https://kingpanda.jp
https://kingpanda.jp
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