È ansible importare un’intera directory in sass usando @import?

Sto modularizzando i miei fogli di stile con i partial 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 partial (è una directory piena di partials SASS) come @import compass o qualcosa del genere?

Se stai utilizzando Sass in un progetto Rails, la gem 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 si importa una directory, come è ansible determinare l’ordine di importazione? Non c’è modo che non introduca un nuovo livello di complessità.”

Alcuni potrebbero sostenere 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 alle nostre opinioni e sono principalmente utilizzati per le regolazioni, con il sollevamento pesante gestito dalla nostra struttura personalizzata. Per me, poche 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 prima – mixin, variabili, ecc. – in una directory di 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. Nei CSS, i file importati per ultimi possono sovrascrivere gli stili indicati in precedenza. Se si importa una directory, come si può 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 vuoi essere in grado di sovrascrivere con sicurezza gli stili che sono definiti in un altro file o scrivere mix in un file e usarli in un altro.

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

Dai un’occhiata al progetto sass-globbing .

Creo un file chiamato __partials__.scss nella stessa directory di partials

 |- __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 interi partials , scrivi @import "partials" . Se voglio importare qualcuno di loro, posso anche scrivere @import "partials/header" .

Potresti usare un po ‘di soluzioni ponendo un file sass nella cartella in cui desideri importare e importare tutti i file in quel file in questo modo:

percorso del file: main / current / _current.scss

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

e nel prossimo file di livello dir si usa solo l’importazione per il file che importa tutti i file da quella directory:

percorso del file: main / main.scss

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

In questo modo hai lo stesso numero di file, come se importassi l’intera dir. Attenzione all’ordine, il file che arriva per ultimo sostituirà le parentesi corrispondenti.

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

non sembra.

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

Potresti voler conservare l’ordine di origine, quindi puoi semplicemente usarlo.

 @import 'foo', 'bar'; 

Preferisco questo.

questo ha funzionato bene per me

 @import 'folder/*'; 

Cerco anche una risposta alla tua domanda. Corrisponde alle risposte l’importazione corretta tutte le funzioni non esistono.

Ecco perché ho scritto uno script python che devi inserire nella root della tua 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'; 

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 sbagliato. Se stai facendo le cose correttamente, usi l’ordine css per aiutarti a ridurre la specificità e mantenere i tuoi css semplici e puliti.

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

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

Puoi farlo anche per le sottodirectory, se ti serve, ma non penso che la struttura dei tuoi file css debba essere troppo profonda.

Sebbene io utilizzi questo approccio, penso comunque che un’importazione globale dovrebbe esistere in sass, per le situazioni in cui l’ordine non ha importanza, come una directory di mixin o persino animazioni.

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

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

Maggiori informazioni sulla funzione di importazione in Sass puoi trovare qui .