Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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
10
Help us understand the problem. What are the problem?