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

209

Estoy modularizando mis hojas de estilo con parciales 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 manera de incluir todo el directorio de parciales (es un directorio lleno de parciales SASS) como @import compass o algo así?

corroído
fuente
3
No es la respuesta pero es útil: SASS puede importar varios archivos en una sola importación, como @import 'partials/header', 'partials/viewport', 'partials/footer';.
llobet

Respuestas:

201

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

@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 forma 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.

Dennis Best
fuente
77
o agregue @import "*"(en application.css.scss) si los archivos css / scss de su controlador están en la carpeta "app / assets / stylesheets" junto con application.css.scss.
Magne
esta "gema" tiene errores y no funciona en Windows, vea este problema que ha estado abierto durante mucho tiempo y esencialmente significa que está completamente roto github.com/chriseppstein/sass-globbing/issues/3
pilavdzice
Estás hablando de la joya de Chris Eppstein. Mi respuesta usa la gema sass-rails, que es diferente, creo. No estoy en Windows, pero no veo ningún problema relacionado con la gema sass-rails.
Dennis Best
1
Esto no funcionó para mí: el globbing se desglosó en líneas individuales vanilla css @import de archivos individuales. Lo cual, desafortunadamente, funcionó en desarrollo, pero no en producción (ya que solo hay una ruta de recurso raíz de application.css en producción)
Peter Ehrlich
55
Me funcionó muy bien, gracias por este consejo. Me sorprende gratamente que decir @import "*"en application.scss incluya todos los demás archivos presentes en el mismo directorio pero no vuelva a incluir application.scss ... esperaba obtener un error de bucle infinito.
Topher Hunt
94

Esta característica nunca será parte de Sass. Una razón importante es el orden de importación. En CSS, los archivos importados en último lugar pueden anular los estilos indicados anteriormente. Si importa un directorio, ¿cómo puede determinar el orden de importación? No hay forma de que no introduzca un nuevo nivel de complejidad. Al mantener una lista de importaciones (como lo hizo en su ejemplo), está siendo explícito con el orden de importación. Esto es esencial si desea poder anular con confianza los estilos definidos en otro archivo o escribir mixins en un archivo y usarlos en otro.

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

Brandon Mathis
fuente
260
para archivos CSS bien estructurados, el orden de inclusión no debería importar
Milovan Zogovic
57
@MilovanZogovic Confiar mucho en las anulaciones tiene un olor a código, pero no hay nada incorrecto en usar la cascada. Así fue diseñado el lenguaje.
Brandon Mathis
34
@BrandonMathis Entiendo la pureza teórica aquí, pero en una implementación (la mía y supongo corroída) puede elegir escribir su CSS de tal manera que los diferentes archivos no se afecten entre sí. Tengo un directorio llamado "módulos" con archivos que contienen una regla de clase css diferente. Quiero que se incluyan todos los archivos en ese directorio, y su orden no es, y por diseño nunca será, importante. Es complicado tener que actualizar la lista cada vez que agrego una nueva.
Robin Winslow
55
Si tengo un directorio que está lleno de CSS no aplicables,% de reglas, funciones, etc., no hay ningún riesgo involucrado y lo contrario (no permitir) solo conduce a un tedio inútil y largos "encabezados de importación" en los archivos en lugar de lo que podría ser línea única de @import "/functions" o @import "partials/".
srcspider
3
Un caso de uso es la importación de módulos, donde el orden no es importante y los estilos pueden tener espacios de nombres ... Me gustaría ver esta función, aunque estoy de acuerdo en que debería usarse con prudencia ...
Will Hancock
41

Echa un vistazo al proyecto sass-globbing .

Akshay Rawat
fuente
1
mi comentario está desactualizado por algunos años, pero ... el proyecto sass-globbing tiene un progreso muy lento, y solo un desarrollador que no está demasiado preocupado por hacer que las cosas funcionen en Windows. Recién estamos comenzando a hacer uno nuevo que funcione en Linux, Mac y Windows
Stuart
33

Creo un archivo nombrado __partials__.scssen el mismo directorio departials

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

En __partials__.scss, escribí estos:

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

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

pantano
fuente
2
Esa es una muy buena solución. Es lo que hace la brújula para simplificar su inclusión +1
Jethro Larson
8
Esto es básicamente lo mismo que la configuración OP. Le gustaría importar los archivos sin agregar manualmente las @import 'partials/xyz'declaraciones cada vez que se crea un nuevo parcial.
gyo
1
Downvoters + Upvoters: ¿puede explicar cómo esta respuesta es diferente de la configuración del OP?
gyo
44
Eso no resuelve nada.
oligofren
2
@gyo No ayuda al OP si solo tienen un directorio de parciales, pero ayuda a las personas con múltiples directorios de parciales. Si tengo formsy widgetsdirectorios, que pueda @import "forms"; @import "widgets"en el archivo principal de CSS de una página, y la única preocupación acerca de todos los parciales individuales ( @import forms/text; @import forms/button...) en el interior forms.scssy widgets.scss.
ttotherat
4

Podría usar un poco de solución colocando un archivo sass en la carpeta que le gustaría importar e importar todos los archivos en ese archivo de esta manera:

ruta del archivo: main / current / _current.scss

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

y en el siguiente archivo de nivel de directorio 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 esa manera, tiene el mismo número de archivos, como si estuviera importando todo el directorio. Tenga cuidado con el orden, el archivo que viene último anulará los estilos coincidentes.

IGRACH
fuente
3

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

@import
  'foo',
  'bar';

Prefiero esto.

Dewwwald
fuente
2

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

no lo parece

Si alguno de estos archivos siempre requiere los otros, haga que importen los otros archivos y solo importen los de nivel superior. Si todos son independientes, entonces creo que tendrás que seguir haciéndolo como lo haces ahora.

xaxxon
fuente
Sí, vi la documentación, solo verifiqué si alguien sabía un truco o esperaba que fuera solo indocumentado jajaja. Sin embargo
corroído el
2

La respuesta aceptada por Dennis Best afirma 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, utiliza el orden css para ayudarlo a reducir la especificidad y mantener su css simple y limpio.

Lo que hago para organizar las importaciones es agregar un _all.scssarchivo en un directorio, donde importo todos los archivos relevantes, en el orden correcto. De esta manera, mi archivo de importación principal 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 puede hacer esto para subdirectorios, si lo necesita, pero no creo que la estructura de sus archivos css deba ser demasiado profunda.

Aunque uso este enfoque, sigo pensando que debería existir una importación global en sass, para situaciones en las que el orden no importa, como un directorio de mixins o incluso animaciones.

BRN
fuente
Si usa un enfoque como RSCSS, entonces la especificidad es igual, y cada componente solo se aplica donde sea necesario sin conflictos.
RWDJ
1

También busco una respuesta a tu pregunta. Corresponde a las respuestas la correcta importación de todas las funciones no existe.

Es por eso que he escrito un script de Python que debe colocar en la raíz de su carpeta scss de la siguiente manera:

- 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';
Sens4
fuente
0

Esto funcionó bien para mi

@import 'folder/*';
Siddhartha Mukherjee
fuente
77
Creo que esto se debe a la función de rubí, no a SASS. Algunos compiladores tienen problemas de esta manera. Por ejemplo, usé esto por gulp-ruby-sass y funcionó, pero al usar gulp-sass generó un error.
Morteza Ziyae
0

Puede generar el archivo SASS que importa todo automáticamente, yo uso esta tarea Gulp:

concatFilenames = require('gulp-concat-filenames')

let concatFilenamesOptions = {
    root: './',
    prepend: "@import '",
    append: "'"
}
gulp.task('sass-import', () => {
    gulp.src(path_src_sass)
        .pipe(concatFilenames('app.sass', concatFilenamesOptions))
        .pipe(gulp.dest('./build'))
})

También puede controlar el orden de importación ordenando las carpetas de esta manera:

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]
Miro Junker
fuente
0

Puede ser una pregunta antigua, pero aún relevante en 2020, por lo que podría publicar alguna actualización. Desde la actualización de Octobers'19 generalmente deberíamos usar @use en lugar de @import , pero eso es solo un comentario. La solución a esta pregunta es usar archivos de índice para simplificar la inclusión de carpetas completas. Ejemplo a continuación.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@use 'code';
@use 'lists';

// style.scss
@use 'foundation';

https://sass-lang.com/documentation/at-rules/use#index-files

Pensador
fuente
1
Creo que quieres usar @forwarden tu _index.scss en lugar de@use
Isaac Pak
-4

Al definir el archivo a importar es posible usar todas las definiciones comunes de carpetas.

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

Puede encontrar más información sobre la función de importación en Sass aquí .

Nesha Zoric
fuente