2015-06-28 14 views
7

Il sito su cui sto lavorando utilizza la pipeline di asset di rotaie e un file application.scss per importare ed elaborare diversi file css.Come evitare più @import di variabili SASS?

Tuttavia, alcuni fogli di stile vengono utilizzati in luoghi specifici, e per quelli ha poco senso importarli nel manifest globale. Ma non quindi importarli richiede l'importazione di variabili.scss e possibilmente di mixins.scss nel foglio stesso (in modo che vengano elaborati correttamente), risultando in codice duplicato nel css finale.

C'è un modo per dire sostanzialmente al preprocessore: "fidati di me, la variabile/mixin che stai vedendo sarà definita quando tutto viene elaborato"?

Altrimenti non vedo ho per evitare di importare ogni foglio in un singolo manifest, che sembra gonfiato.

Grazie.

+0

Possibili duplicati: http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss, http: // stackoverflow.it/questions/18408324/how-can-one-only-variables-variables-and-mixins-from-scss-stylehsheets, http://stackoverflow.com/questions/24182734/how-to-avoid-duplication-of- styles-in-scss – cimmanon

+0

Non sono sicuro di averlo capito, se hai file che includono solo mixin e variabili dovresti essere in grado di includerli tutte le volte che vuoi senza gonfiarsi? Nessuna delle due cose ha come risultato il css compilato –

+0

Quindi, ad es. @import "/ mixins"; all'inizio di un file css non si ottiene più codice compilato che non usando l'importazione? Quindi semplicemente permette al css di essere compilato? Se è così. grande e grazie! –

risposta

1

La risposta breve alla tua domanda è no. Le variabili devono essere definite in un ordine logico da quando vengono chiamate nella compilazione. È come uno scenario di "pollo e uova".

Da quello che posso accertare nella descrizione, il progetto su cui stai lavorando non si sta compilando in un flusso di lavoro unificato, ma si suddivide in parti modulari relazionali alla struttura del file. Se questo è il caso, ciò che puoi fare all'inizio di ogni file è fare riferimento al file delle variabili dalla radice.

In un flusso di lavoro normale, si dovrebbe importare i file SCSS in base alla gerarchia definita in questo modo:

sass/style.scss

/* Main Stylesheet */ 

@import "variables"; 
@import "mixins"; 

/* Modular Sections */ 
@import "layout/header"; 
@import "layout/body"; 
@import "layout/footer"; 

sarebbe compilare fuori per un foglio di stile con un style.css comando sass sass/style.scss:style.css

Quello che sto assumendo il progetto è che tutti i file /* Modular Sections */ vengono compilati nei propri file CSS.

layout/header.scss

/* Header Stylesheet */ 
@import "../variables"; 
@import "../mixins"; 

Data una struttura di file che assomiglia a:

/root 

    style.scss 
    variables.scss 
    mixins.scss 

    /layouts 

    header.scss 
    body.scss 
    footer.scss 

Tutto questo sembra un pò sciocco però. Non conosco tutti i parametri che vanno nella tua attuale raccolta sass, ma ti consiglio di utilizzare un flusso di lavoro unificato.

1

È possibile utilizzare partial in modo che il compilatore non cercare di interpretare le variabili ecc

In sostanza, rinominare i file che si non si desidera che il compilatore di interpretare - ma sarà essere disponibile se compilato - - con un trattino basso prima del nome del file.

es. _filename.scss

Problemi correlati