Scssスタイルシートから変数とミックスインのみをインポートするにはどうすればよいですか？

Question

私はZurb Foundation 4（S）CSSフレームワークを使用していますが、大規模な複製スタイルの問題が発生しています。これは、すべてのファイルが@import 'foundation'であるため、Foundationのすべてのスタイルもインポートされるからです（body、.row、.buttonおよびfriendsのルール）。これにより、SCSSのコンパイル時間が長くなり、Chromeのウェブ開発者コンソールを操作するのが難しくなります.Zurbのスタイルはすべて4〜5回宣言されています。

これを軽減するために、Foundationが使用する無効な変数（foundation_and_overrides.scss、次にfoundation_and_overridesインポートグローバル）を含む、無効な変数を含むglobals scssファイルを作成しました。 globals.scssファイルだけをインポートすると、Foundationミックスインを使用しないファイルで重複がなくなります。

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

Answer 1

輸入は、すべてまたは何もありません。ファイルにあるものはすべてあなたが得るものです。しかし、Foundationのソースを調べると、放出スタイルを抑制する変数を設定することができます（たとえば、buttonsに設定すると、$include-html-button-classesをfalseに設定するとスタイルが無効になります）。このデザインパターンはFoundation固有のものなので、他のライブラリをこのように作成することは期待できません。

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