痒いところに手が届く、n番目の要素にスタイルを…を楽にしてくれるmixin集「Family.scss」 – 『Mixin』
CSSのスタイルの指定において、n番目の要素にスタイルを適応させる際に:nth-childや:nth-first-childなどの擬似クラスを利用します。
シンプルな「n番目」は簡単な擬似クラスの指定で事足りますが、「n番目からm番目」、「n番目からm番目の間をl番目おきに」などの複雑な条件を指定するのはむつかしいです。
n番目を快適にしてくれる「Family.scss」
これを簡単でわかり易い記述に助けてくれるのがFamily.scssです。
Sass(scss)の利用が前提で、詳細はFamily.scssの配布サイトにわかりやすくまとまっています。
デモサイトがわかりやすい
デモサイトのサンプルを見て試してみると、有用性はもちろん、今まで想像してなかったような条件を記述できることを発見できました。
いろいろ試していく中で、今まで打ち消すようなスタイルを記述していた箇所を、修正して省いていけそうです。
久しぶりに便利で利用頻度が高くなりそうなmixinに巡り合ったので、プリセットのツールとして導入しつつ備忘録とします。
おわります。
share
ー
tag
ー
-
previous
ー痒いところに手が届く、n番目の要素にスタイルを…を楽にしてくれるmixin集「Family.scss」 – 『Mixin』
-
next
ーinput要素のplaceholder属性にスタイルを適用させる – 『CSS』
