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

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í?

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.

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í:

Echa un vistazo al proyecto sass-globbing .

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".

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.

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

@import
  'foo',
  'bar';

Prefiero esto.

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.

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.

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';

Esto funcionó bien para mi

@import 'folder/*';

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
]

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

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í .