¿Cómo se pueden importar solo variables y mixins desde Scss stylehsheets?

Estoy usando el framework Zurb Foundation 4 (S) CSS, y me estoy encontrando con un problema de estilos masivamente duplicados. Esto se debe a que en todos los archivos en los que @import 'foundation' , todos los estilos de Foundation también se importan (reglas para body , .row , .button y friends). Esto lleva a largos tiempos de comstackción de SCSS y una consola de desarrollador web difícil de navegar en Chrome, ya que todos los estilos de Zurb se declaran cuatro o cinco veces.

Para mitigar esto, he creado un archivo scss global, que contiene las variables anulables que usa Foundation (está copiado y pegado desde foundation_and_overrides.scss , y luego foundation_and_overrides import global). La importación solo del archivo globals.scss elimina la duplicación solo en archivos que no utilizan Foundation mixins.

Está en los archivos que hacen uso de Foundation mixins: ¿Puedo importar solo mixins desde un archivo SCSS, sin importar los estilos concretos de Foundation?

    Las importaciones son una cosa de todo o nada. Todo lo que está en el archivo es lo que obtienes. Sin embargo, si mira a través de la fuente de Foundation, hay variables que puede modificar que suprimirán la emisión de estilos (por ejemplo, en los botones , establecer $include-html-button-classes en false deshabilitará los estilos). Este patrón de diseño es específico de la Fundación, no se puede esperar que otras bibliotecas sean creadas de esta manera.

    Cuando importa una base a través de @import "foundation" , está importando este archivo: https://github.com/zurb/foundation/blob/master/scss/foundation.scss . Como puede ver, importa otros archivos. No tiene que importar este archivo si no lo necesita todo: simplemente importe el archivo específico que desea (por ejemplo, @import 'foundation/components/side-nav' para el archivo de navegación lateral).

    Eche un vistazo a _partial.scss en el documento

    https://sass-lang.com/guide

    Parciales Puede crear archivos Sass parciales que contienen pequeños fragmentos de CSS que puede incluir en otros archivos Sass. Esta es una gran manera de modularizar su CSS y ayudar a mantener las cosas más fáciles de mantener. Un parcial es simplemente un archivo Sass nombrado con un subrayado inicial. Puede ponerle un nombre como _partial.scss. El guión bajo le permite a Sass saber que el archivo es solo un archivo parcial y que no debe generarse en un archivo CSS . Los parciales Sass se usan con la directiva @import.