ホームページ > ウェブフロントエンド > htmlチュートリアル > Family.scss mixins_html/css_WEB-ITnose はサブクラス セレクターを簡素化します

Family.scss mixins_html/css_WEB-ITnose はサブクラス セレクターを簡素化します

WBOY
リリース: 2016-06-21 08:46:57
オリジナル
1908 人が閲覧しました

Family.scss

Versionv1.0.4

Family.scss は、管理に役立つ 24スマート Sass ミックスインのセットです。 :nth-child 化された要素のスタイルを、簡単かつ上品な方法で。

Web サイト : http://lukyvj.github.io/family.scss/

インストール

通常

  • プロジェクトのクローンを作成します
  • $ middleman(middleman は使用しません ? https://middlemanapp.com/ に移動)

代替インストール

  • $ npm install family.scss
  • $ bower install family.scss

npm 上の Family.scss

使用法

まず、Family.scss ソース ファイルをインポートします。あなたのプロジェクト。

これで、スタイルシート上ですぐにミックスインを使用できるようになります。

入力:

ul li {  background: blue;  @include first(3) {    background: blue;  }}
ログイン後にコピー

出力:

ul li {  background: blue;}ul li:nth-child(-n + 3) {  background: blue;}
ログイン後にコピー

なぜ Sass だけなのでしょうか?

それは本当です、私は Sass のためにそれを行いましたが、何人かの素晴らしい貢献者がそれを次のように拡張しました:

  • Stylus

Changelogs

v1 .0.3

  • first()mixin は、指定されたパラメーターが 1 の場合、:first-child を使用するようになり、closed#10
  • n-between()mixin が追加され、closed#35
  • at-least()、at-most()、in-between() 数量クエリ ミックスインが追加されました、closed#24
  • ペア-between() は均等になりました -between()、closed#34
  • impair-between() は、odd-between() になりました。close#34
  • About モーダルに追加されたヘッダー パターン ジェネレーターのソース コード
  • バージョン番号が追加されましたフッター
  • 背景フィルターが概要ページから削除されました
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート