Come si possono importare solo variabili e mixin da fogli di stile Scss?

Question

Sto utilizzando il framework CSS di Zurb Foundation 4 (S) e sto riscontrando un problema di stili massivamente duplicati. Questo perché in ogni file che ho @import 'foundation' in, vengono importati anche tutti gli stili da Foundation (regole per body, .row, .button e amici). Ciò porta a lunghi tempi di compilazione SCSS ea una console per sviluppatori web difficile da navigare in Chrome, poiché tutti gli stili di Zurb sono dichiarati quattro o cinque volte.

per attenuare questo, ho creato un file globals SCSS, che contiene le variabili ignorabile che utilizza Foundation (è copia-incollato da foundation_and_overrides.scss, poi foundation_and_overrides globali di importazione). L'importazione del solo file globals.scss elimina la duplicazione solo nei file che non utilizzano i mixin Foundation.

È nei file che fanno uso di Foundation mixins: Posso importare solo i mixin da un file SCSS, senza importare gli stili di base in cemento?

Answer 1

Le importazioni sono una cosa tutto o niente. Tutto ciò che è nel file è ciò che ottieni. Se si guarda attraverso l'origine di Foundation, tuttavia, ci sono variabili che è possibile modificare che sopprimono gli stili di emissione (ad esempio in buttons, l'impostazione di $include-html-button-classes su false disabiliterà gli stili). Questo modello di progettazione è specifico della Fondazione, non puoi aspettarti che altre librerie siano create in questo modo.

Quando si importa la fondazione tramite @import "foundation", si sta importando questo file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. Come puoi vedere, importa altri file. Non è necessario importare questo file se non è necessario tutto: basta importare il file specifico desiderato (ad esempio @import 'foundation/components/side-nav' solo per il file side-nav).