È possibile importare un'intera directory in sass usando @import?

Sto modularizzando i miei fogli di stile con i parziali SASS in questo modo:

@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

c'è un modo per includere l'intera directory dei parziali (è una directory piena di SASS-parziali) come @import compass o qualcosa del genere?

Se si utilizza Sass in un progetto Rails, la gemma sass-rails, https://github.com/rails/sass-rails , presenta l'importazione globale.

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

Per rispondere alla domanda in un'altra risposta "Se importi una directory, come puoi determinare l'ordine di importazione? Non c'è modo che non introduca un nuovo livello di complessità."

Alcuni sosterrebbero che l'organizzazione dei file in directory può RIDURRE la complessità.

Il progetto della mia organizzazione è un'app piuttosto complessa. Ci sono 119 file Sass in 17 directory. Questi corrispondono approssimativamente ai nostri punti di vista e sono utilizzati principalmente per le regolazioni, con il sollevamento pesante gestito dalla nostra struttura personalizzata. Per me, alcune righe di directory importate sono un po 'meno complesse di 119 righe di nomi di file importati.

Per indirizzare l'ordine di caricamento, inseriamo i file che devono essere caricati per primi (mixin, variabili, ecc.) In una directory a caricamento anticipato. Altrimenti, l'ordine di caricamento è e dovrebbe essere irrilevante ... se stiamo facendo le cose correttamente.

Questa funzione non farà mai parte di Sass. Uno dei motivi principali è l'ordine di importazione. Nel CSS, i file importati per ultimi possono sovrascrivere gli stili indicati in precedenza. Se importi una directory, come puoi determinare l'ordine di importazione? Non c'è modo che non introduca un nuovo livello di complessità. Mantenendo un elenco di importazioni (come hai fatto nel tuo esempio), sei esplicito con l'ordine di importazione. Questo è essenziale se si desidera poter sovrascrivere con sicurezza gli stili definiti in un altro file o scrivere mixin in un file e utilizzarli in un altro.

Per una discussione più approfondita, visualizza questa richiesta di funzionalità chiusa qui:

Dai un'occhiata al progetto sass-globbing .

Creo un file chiamato __partials__.scssnella stessa directory dipartials

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

In __partials__.scss, ho scritto questi:

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

Quindi, quando voglio importare il tutto partials, basta scrivere @import "partials". Se voglio importarne uno, posso anche scrivere @import "partials/header".

Puoi usare un po 'di soluzione alternativa posizionando un file sass nella cartella in cui desideri importare e importare tutti i file in quel file in questo modo:

percorso file: main / current / _current.scss

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

e nel prossimo file a livello di dir usi semplicemente import per file cosa importa tutti i file da quella dir:

percorso del file: main / main.scss

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

In questo modo hai lo stesso numero di file, come se stessi importando l'intera directory. Attenzione all'ordine, il file che arriva per ultimo sovrascriverà i file corrispondenti.

Potresti voler mantenere l'ordine dei sorgenti quindi puoi semplicemente usarlo.

@import
  'foo',
  'bar';

Preferisco questo.

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

non sembra.

Se uno di questi file richiede sempre gli altri, è necessario importare gli altri file e importare solo quelli di livello superiore. Se sono tutti autonomi, allora penso che dovrai continuare a farlo come sei adesso.

La risposta accettata da Dennis Best afferma che "Altrimenti, l'ordine di caricamento è e dovrebbe essere irrilevante ... se stiamo facendo le cose correttamente". Questo è semplicemente errato. Se stai facendo le cose correttamente, usi l'ordine css per aiutarti a ridurre la specificità e mantenerti css semplice e pulito.

Quello che faccio per organizzare le importazioni è l'aggiunta di un _all.scssfile in una directory, in cui importare tutti i file rilevanti in esso, nell'ordine corretto. In questo modo, il mio file di importazione principale sarà semplice e pulito, in questo modo:

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

Potresti farlo anche per le sottodirectory, se necessario, ma non credo che la struttura dei tuoi file CSS dovrebbe essere troppo profonda.

Sebbene io usi questo approccio, penso ancora che dovrebbe esistere una importazione glob in sass, per situazioni in cui l'ordine non ha importanza, come una directory di mixin o persino animazioni.

Cerco anche una risposta alla tua domanda. Corrisponde alle risposte non esiste la funzione di importazione completa corretta.

Ecco perché ho scritto uno script Python che devi inserire nella cartella principale della cartella scss in questo modo:

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

Quindi camminerà attraverso l'albero e troverà tutti i file scss. Una volta eseguito, creerà un file scss chiamato 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 esempio di un file di output:

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

questo ha funzionato bene per me

@import 'folder/*';

Puoi generare il file SASS che importa tutto automaticamente, io uso questo compito 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'))
})

Puoi anche controllare l'ordine di importazione ordinando le cartelle in questo modo:

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
]

Potrebbe essere una vecchia domanda, ma ancora rilevante nel 2020, quindi potrei pubblicare qualche aggiornamento. Dall'aggiornamento di Octobers'19 dovremmo generalmente usare @use anziché @import , ma questa è solo un'osservazione. La soluzione a questa domanda è utilizzare i file indice per semplificare includendo intere cartelle. Esempio sotto.

// 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

Con la definizione del file da importare è possibile utilizzare tutte le cartelle definizioni comuni.

Quindi, @import "style/*"compilerà tutti i file nella cartella di stile.

Maggiori informazioni sulla funzione di importazione in Sass sono disponibili qui .