DIST.13 SCSSで使える@eachが結構デキるヤツだった話（野地剛）

本編のスライド

dist_noji-go.pdf

本編で実際に使ったスライドです。

Speaker Deck版はコチラ。

本編中に紹介した元素周期表

元素周期表ページ
https://go-noji.github.io/Scss-each_periodicTable/
本編中に紹介した@eachで作る元素周期表のページです。極端です。

そういえば、113番元素がニホニウムに決定しましたね。
元素周期表ページのGitHubリンク
https://github.com/Go-Noji/Scss-each_periodicTable

本編中に紹介できなかったネタ

aタグの疑似要素を一括指定する
https://go-noji.github.io/Scss-each_aPsedou/
地味ですが、地味に使える気がします。

GitHubリンク
https://github.com/Go-Noji/Scss-each_classImg
aタグに付き物の'live', 'hover', 'active', 'visited'に同じスタイルを当てましょう、という内容です。

@mixinでもいいけど、こんな方法もいかがでしょう。
画像名とクラス名を同期
https://go-noji.github.io/Scss-each_classImg/
一番好きな花札は坊主です。

GitHubリンク
https://github.com/Go-Noji/Scss-each_aPsedou
background-imageに指定する画像名とクラス名を同じにすれば、同期が可能です。

使用しているcss設計からブレなければ、こんな管理の仕方もアリではないでしょうか。
インデックスを取得して色々する
https://go-noji.github.io/Scss-each_pref/
都道府県ランキングですが、実際の人口を調べるのをサボッたことをお詫び申し上げます……。

GitHubリンク
https://github.com/Go-Noji/Scss-each_pref
index関数で取得した数字を::beforeに使ったり、nth関数に使ったりする例です。