Family.scss Mixinを使ってn番目の子セレクタを自動化する

Sass 最新のCSSを管理する最良の方法は ミックスインライブラリ 開発サイクル中にさらに時間を節約することができます.

これらのmixinは次のように動作します 自動コードまたは機能 メインのSassファイルで呼び出すこと。ミックスインの中にはより一般的なものもあれば、非常に特殊なものもあります。 Family.scssライブラリ.

この無料ライブラリーは、 26ミックスイン ランニング用 複雑な ：nth-child セレクター すべてのコードを暗記せずに.

ほとんどの開発者は ：nth-child セレクタとデフォルトで、それは確かに複雑ではありません。あなたは単に 数値セレクタを渡す, 例えば nth-child（2） 所属スタイルの規則が親要素の2番目の子すべてに適用される場所.

ただし、選択したい場合は、これがはるかに複雑になります。 動的要素 （最初と最後のような）またはあなたが選択したいとき 小さな一握りの要素 （最初の3人の子供など）.

これはFamily.scssが役立つことができる場所です。それは非常に小さい図書館です、そしてそれは子供のセレクターのための26の解決策を含みます ベーシックからスーパーコンプレックスまで. 各mixinのホームページにはデモがあり、必要に応じてブラウズおよびフィルタリングできます。.

ここにあるいくつかの 面白い例 このライブラリができることを披露するには：

あなたが閲覧することができるもっと多くのものがあります、そして彼らはそれぞれ彼らがどのように働くかを視覚化するのを助けるためにデモを持ちます.

いくつかの高度なミックスイン 数量クエリに頼る ある要素を選ぶ “少なくとも” または “せいぜい” 一定の範囲に固定されています。たとえば、少なくとも5つ（またはそれ以上）の子を持つ親要素に対して、すべての子を選択できます。.

それらについて読むときこれらの考えは混乱するかもしれませんが ライブデモ 本当にそれをすべて透明にする.

掘り下げるには、 コピーをダウンロードする これらのデモのすべてと一緒に、GitHubリポジトリからこのmixinライブラリの。そして、あなたは自分の考えや質問をTwitterのプロジェクト作成者と共有することができます@LukyVJ.