Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭(または最後)からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える(悩む)ことがあると思います。
「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。

使い方

まず、必要なSCSSを 配布サイト (Family.scss) 上部にある「DOWNLOAD」ボタン、または GitHub(LukyVj/family.scss) からダウンロードするなどして読み込みます。
あとは、普段mixinを使うときと同様で@include ここにmixin名(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空になる場合もありますが、基本的にここへ指定する数を記述するようになります。

使用例

使用方法は実際の表示と合わせて配布サイトでも確認できますが、せっかくなのでここでも幾つか使用例を紹介します。
以下では省略していますが、いずれもulliを利用したHTMLを使用している想定で、SCSSではその中から特定のli要素に対してbackground: red;を指定するという形で紹介していきます。

First

Firstは「先頭からn番目まで」という指定方法で、使用時は@include first(n)と指定します。
例えば下記のように記述すれば、先頭から3番目までのli要素にスタイルを適用できます。

SCSS

ul li {
  @include first(3) {
    background: red;
  }
}

ちなみに、逆に最後から指定したい時はLastというものが利用できます。

From-End

From-Endは「最後からn番目」という指定方法で、使用時は@include from-end(n)と指定します。
例えば下記のように記述すれば、最後から3番目のli要素にスタイルを適用できます。

SCSS

ul li {
  @include from-end(3) {
    background: red;
  }
}

Between

Betweenは「x番目からy番目まで」のような指定方法で、使用時は@include between(x, y)と指定します。
例えばli要素が10個並べられており、その中の3番目から6番目までにスタイルを適用したいという時は、下記のように記述します。

SCSS

ul li {
  @include between(3, 6) {
    background: red;
  }
}

All-But

All-Butはいわゆる:not()を利用した指定方法で、@include all-but(n)のように記述すると「n番目以外」という指定になります。
例えば下記のように記述すれば、3番目のli要素以外にスタイルを適用できます。

SCSS

ul li {
  @include all-but(3) {
    background: red;
  }
}

From-First-Last

From-First-Lastは「先頭からn番目+最後からn番目」というように、それぞれのn番目を指定することができます。
例えばli要素が10個並べてある場合に下記のように記述すれば、2番目と9番目にスタイルが適用されます。

SCSS

ul li {
  @include from-first-last(2) {
    background: red;
  }
}

ちなみに、単純に先頭と最後を指定するFirst-Lastというものも用意されています。

First-Of

ちょっとわかりずらいかもしれませんが、First-Ofは特定の要素が特定の数ある時、その先頭の要素を指定するということができます。
例えば下記はli要素が10個あると時に先頭のli要素のみにスタイルが適用されるものになりますが、もしli要素が10以外の数になった場合はスタイルは適用されなくなります。

SCSS

ul li {
  @include first-of(10) {
    background: red;
  }
}

ちなみに、逆に最後の要素を指定したい時はLast-Ofというものが利用できます。


以上、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」の紹介でした。
上で紹介した使用例はほんの一部で他にも便利な指定方法が全20種類用意されているので、:nth-child:nth-last-child疑似クラスは多用するけど、指定が苦手な人やもっと楽したいと思う人はぜひ使ってみてください。
また、配布サイトでは実際の動きを確認できるサンプルが要素数を増減させて確認することができる形で用意されていたり、ページ下部ではそれぞれがコンパイル後にどのような記述になるのかもまとめられています。

ファイルのダウンロードや詳細、その他のサンプルについては以下で確認できます。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.