25

Zurb Foundation 4 (S)CSS フレームワークを使用していますが、スタイルが大量に重複しているという問題に直面しています。これは、私が入っているすべてのファイルで@import 'foundation'、Foundation のすべてのスタイルもインポートされるためです ( body、.row、.buttonおよび友人のルール)。これにより、SCSS のコンパイル時間が長くなり、Zurb のすべてのスタイルが 4 ～ 5 回宣言されているため、Chrome で Web 開発者コンソールをナビゲートするのが難しくなります。

これを軽減するために、globalsFoundation が使用するオーバーライド可能な変数を含む scss ファイルを作成しました (からコピーして貼り付け、グローバルfoundation_and_overrides.scssをfoundation_and_overridesインポートします)。ファイルだけをインポートglobals.scssすると、Foundation mixin を使用しないファイルでのみ重複が取り除かれます。

それは Foundation ミックスインを利用するファイルにあります: 具体的な Foundation スタイルをインポートせずに、SCSS ファイルからミックスインのみをインポートできますか?

4

1 に答える 1

15

輸入はオール・オア・ナッシングです。ファイルにあるものはすべてあなたが得るものです。ただし、Foundation のソースに目を通すと、スタイルの発行を抑制するように変更できる変数があります (たとえば、buttons$include-html-button-classesでfalseに設定すると、スタイルが無効になります)。この設計パターンは Foundation 固有のものであり、他のライブラリがこの方法で作成されることは期待できません。

経由で Foundation をインポートすると@import "foundation"、次のファイルがインポートされます: https://github.com/zurb/foundation/blob/master/scss/foundation.scss。ご覧のとおり、他のファイルをインポートします。すべてが必要ない場合は、このファイルをインポートする必要はありません。必要な特定のファイルをインポートするだけです (たとえば@import 'foundation/components/side-nav'、サイド ナビゲーション ファイルのみ)。

于 2013-08-23T17:26:46.163 に答える