使い方

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

使用例

使用方法は実際の表示と合わせて配布サイトでも確認できますが、せっかくなのでここでも幾つか使用例を紹介します。
以下では省略していますが、いずれもulとliを利用した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というものが利用できます。