Errore "variabile non definita" falsamente positivo durante la compilazione di SCSS

Question

Ottenere un messaggio di errore quando si compila il mio SCSS utilizzando la gemma della bussola del rubino.

run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile 
out: unchanged sass/partial/grid.scss 
out:  error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".) 
out: create css/generated/partial/catalog.css 
out: create css/generated/partial/base.css 
out: overwrite css/generated/screen.css 

miei screen.scss importazioni parziali come questo:

@import "partial/base"; 
@import "partial/catalog"; 

Nel mio base parziale ho l'$paragraphFont definito.

$paragraphFont: 'Lucida Sans', arial; 
$regularFontSize: 14px; 

E in catalog.scss lo uso:

.product-view #price-block { 
    p { 
     font-weight: normal; 
     font-family: $paragraphFont; 
     .... 
    } 
} 

cosa strana è che il CSS viene compilato bene, e il $paragraphFont è popolato correttamente. Quindi non so perché il compilatore mi stia lamentando di un errore.

Answer 1

Stai generando file che non è necessario generare.

• screen.scss -> screen.css
• base.scss -> base.css
• catalog.scss -> catalog.css

Il file di catalogo è stato compilato sulla sua proprio. Poiché non sta importando base.scss, le variabili non sono impostate. Il tuo file screen.scss genera come ti aspetti perché sta importando tutte le informazioni necessarie.

Che cosa si vuole fare è rinominare i parziali per cominciare una sottolineatura per impedire loro di essere compilati in proprio:

• screen.scss -> screen.css
• _base.scss (non compilato)
• _catalog.scss (non compilato)

Answer 2

Nella vostra bussola log si afferma:

A) create css/generated/partial/catalog.css 
B) create css/generated/partial/base.css 

Questi devono essere:

A) create css/generated/partial/base.css 
B) create css/generated/partial/catalog.css 

La mia ipotesi è che il vostro screen.scss ha istruzioni di importazione non corrette.

Answer 3

Una spiegazione più semplice che probabilmente si adatta la maggior parte degli utenti qui:

Si sta compilando tutta la tua sass, quando hai solo bisogno di compilare il file di livello superiore

Sass è comunemente modularizzato come segue:

toplevel.scss 
    include child1.scss 
    include child2.scss (that also uses variables from child1.sass but does not import child1.scss) 
    include child3.scss (that also uses variables from child1.sass but does not import child1.sass) 

Durante la compilazione, è solo bisogno di compilare toplevel.scss. Compilare altri file da soli (ad esempio, child2.scss) genererà errori sulle variabili non definite.

Nel vostro gulpfile:

gulp.task('sass', function() { 
    gulp 
    .src('./static/scss/toplevel.scss') // NOT *.scss 
    .pipe(sass()) 
    // Rest is just decoration 
    .pipe(prefixer('last 2 versions', 'ie 9')) 
    .pipe(gulp.dest('./static/css/dist')) 
    .pipe(livereload(livereloadServer)); 
}); 

Answer 4

io consiglierei di guardare in strutture organizzative comuni Sass directory. Il mio preferito è The 7-1 Pattern.

La natura di esso suddivide gli elementi di uso comune in altri file, che sono tutti importati da un main.scss per eliminare le ridondanze.

Ma anche, prima di tutto, presta attenzione alla risposta di @ cimmanon, poiché affronta più direttamente la tua domanda.