with scss long imports documentacion import sass partials

scss - ¿Es posible importar un directorio completo en sass usando @import?



sass[] (11)

Estoy modularizando mis hojas de estilo con parciales de SASS así:

@import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues

¿Hay alguna forma de incluir el directorio completo de parciales (es un directorio lleno de parciales SASS) como @import compass o algo así?

Al definir el archivo para importar, es posible usar todas las carpetas definiciones comunes.

Entonces, @import "style/*" compilará todos los archivos en la carpeta de estilo.

Puede obtener más información sobre la función de importación en Sass here .

Creo un archivo llamado __partials__.scss en el mismo directorio de partials

|- __partials__.scss |- /partials |- __header__.scss |- __viewport__.scss |- ....

En __partials__.scss , escribí esto:

@import "partials/header"; @import "partials/viewport"; @import "partials/footer"; @import "partials/forms"; ....

Entonces, cuando quiera importar los partials completos, solo escriba @import "partials" . Si quiero importar alguno de ellos, también puedo escribir @import "partials/header" .

Es posible que desee conservar el orden de origen, entonces puede usar esto.

@import ''foo'', ''bar'';

Prefiero esto.

Esta función nunca será parte de Sass. Una de las principales razones es el orden de importación. En CSS, los archivos importados al último pueden anular los estilos establecidos anteriormente. Si importa un directorio, ¿cómo puede determinar el orden de importación? No hay manera de que no introduzca un nuevo nivel de complejidad. Al mantener una lista de importaciones (como hiciste en tu ejemplo), estás siendo explícito con el orden de importación. Esto es esencial si desea poder anular con confianza los estilos que están definidos en otro archivo o escribir mixins en un archivo y usarlos en otro.

Para una discusión más a fondo, vea esta solicitud de función cerrada aquí:

Esto funcionó bien para mi

@import ''folder/*'';

La respuesta aceptada por Dennis Best establece que "De lo contrario, el orden de carga es y debería ser irrelevante ... si estamos haciendo las cosas correctamente". Esto es simplemente incorrecto Si está haciendo las cosas correctamente, haga uso de la orden css para ayudarlo a reducir la especificidad y mantener el CSS simple y limpio.

Lo que hago para organizar importaciones es agregar un archivo _all.scss en un directorio, donde importo todos los archivos relevantes, en el orden correcto. De esta forma, mi archivo principal de importación será simple y limpio, así:

// Import all scss in the project // Utilities, mixins and placeholders @import ''utils/_all''; // Styles @import ''components/_all''; @import ''modules/_all''; @import ''templates/_all'';

También podría hacer esto para subdirectorios, si lo necesita, pero no creo que la estructura de sus archivos CSS sea demasiado profunda.

Aunque utilizo este enfoque, todavía creo que debería existir una importación global en sass, para situaciones donde el orden no importa, como un directorio de mixins o incluso animaciones.

Puede utilizar un poco de solución colocando un archivo sass en la carpeta de lo que desea importar e importar todos los archivos en ese archivo como este:

ruta del archivo: main / current / _current.scss

@import "placeholders"; @import "colors";

y en el siguiente archivo de nivel dir, solo usa importar para el archivo que importó todos los archivos de ese directorio:

ruta del archivo: main / main.scss

@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

De esta forma, tiene la misma cantidad de archivos, como si estuviera importando todo el directorio. Tenga cuidado con el orden, el archivo que viene último anulará los montantes correspondientes.

Si está utilizando Sass en un proyecto de Rails, la gema sass-rails, https://github.com/rails/sass-rails , presenta la importación glob.

@import "foo/*" // import all the files in the foo folder @import "bar/**/*" // import all the files in the bar tree

Para responder a la inquietud en otra respuesta "Si importa un directorio, ¿cómo puede determinar el orden de importación? No hay manera de que no introduzca un nuevo nivel de complejidad".

Algunos argumentarían que organizar sus archivos en directorios puede REDUCIR la complejidad.

El proyecto de mi organización es una aplicación bastante compleja. Hay 119 archivos Sass en 17 directorios. Estos corresponden aproximadamente a nuestros puntos de vista y se utilizan principalmente para ajustes, con el trabajo pesado manejado por nuestro marco personalizado. Para mí, unas pocas líneas de directorios importados son un poco menos complejas que 119 líneas de nombres de archivos importados.

Para abordar el orden de carga, colocamos los archivos que deben cargarse primero - mixins, variables, etc. - en un directorio de carga temprana. De lo contrario, el orden de carga es y debería ser irrelevante ... si estamos haciendo las cosas correctamente.

También busco una respuesta a tu pregunta. Correspondan a las respuestas, la función de importación correcta no existe.

Es por eso que he escrito un script de Python que debes colocar en la raíz de tu carpeta de scss así:

- scss |- scss-crawler.py |- abstract |- base |- components |- layout |- themes |- vender

Luego caminará a través del árbol y encontrará todos los archivos scss. Una vez ejecutado, creará un archivo scss llamado main.scss

#python3 import os valid_file_endings = ["scss"] with open("main.scss", "w") as scssFile: for dirpath, dirs, files in os.walk("."): # ignore the current path where the script is placed if not dirpath == ".": # change the dir seperator dirpath = dirpath.replace("//", "/") currentDir = dirpath.split("/")[-1] # filter out the valid ending scss commentPrinted = False for file in files: # if there is a file with more dots just focus on the last part fileEnding = file.split(".")[-1] if fileEnding in valid_file_endings: if not commentPrinted: print("/* {0} */".format(currentDir), file = scssFile) commentPrinted = True print("@import ''{0}/{1}'';".format(dirpath, file.split(".")[0][1:]), file = scssFile)

un ejemplo de un archivo de salida:

/* abstract */ @import ''./abstract/colors''; /* base */ @import ''./base/base''; /* components */ @import ''./components/audioPlayer''; @import ''./components/cardLayouter''; @import ''./components/content''; @import ''./components/logo''; @import ''./components/navbar''; @import ''./components/songCard''; @import ''./components/whoami''; /* layout */ @import ''./layout/body''; @import ''./layout/header'';