css - sintaxis - sass variable font family
¿Cómo se pueden importar solo variables y combinaciones de hojas de estilo Sass? (2)
Estoy usando el marco CSS de Zurb Foundation 4 (S), y me estoy topando con un problema de estilos masivamente duplicados. Esto se debe a que en todos los archivos en los que yo @import ''foundation'' , todos los estilos de Fundación también se importan (reglas para body , .row , .button y friends). Esto lleva a largos tiempos de compilació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 de globals , que contiene las variables sobrepasables que Foundation utiliza (se copia y pega desde foundation_and_overrides.scss , luego foundation_and_overrides import globals). Importar solo el archivo globals.scss elimina la duplicación solo en archivos que no hacen uso de los mixins de Foundation.
Está en los archivos que hacen uso de los mixins de Foundation: ¿Puedo importar solo los mixins desde un archivo SCSS, sin importar los estilos de Foundation concretos?
Echa un vistazo a _partial.scss en el doc.
Parciales Puede crear archivos Sass parciales que contengan pequeños fragmentos de CSS que puede incluir en otros archivos Sass. Esta es una excelente 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 guión bajo. Podrías llamarlo algo como _partial.scss. El subrayado le permite a Sass saber que el archivo es solo un archivo parcial y que no se debe generar en un archivo CSS . Los parciales de Sass se utilizan con la directiva @import.
Las importaciones son una cosa de todo o nada. Todo lo que está en el archivo es lo que obtienes. Sin embargo, si examina la fuente de Foundation, hay variables que puede modificar que suprimirán los estilos de emisión (por ejemplo, en los buttons , establecer $include-html-button-classes en false deshabilitará los estilos). Este patrón de diseño es específico de la Fundación, no puede esperar que otras bibliotecas se creen de esta manera.
Cuando importa base a través de @import "foundation" , está importando este archivo: https://github.com/zurb/foundation/blob/master/scss/foundation.scss . Como puedes ver, importa otros archivos. No tiene que importar este archivo si no necesita todo: solo importe el archivo específico que desea (por ejemplo, @import ''foundation/components/side-nav'' solo para el archivo de navegación lateral).