Errore falso positivo “variabile non definita” durante la compilazione di SCSS

Ottenere un messaggio di errore durante la compilazione della mia SCSS utilizzando la gem della bussola del ruby.

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 

My screen.scss importa screen.scss come questo:

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

Nel mio partial parziale ho definito $paragraphFont .

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

E in catalog.scss lo uso:

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

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

Stai generando file che non devono essere generati.

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

Il file di catalogo viene compilato da solo. 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.

Quello che vuoi fare è rinominare i tuoi parziali per iniziare con un trattino basso per impedire che vengano compilati da soli:

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

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

Stai 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, è sufficiente compilare toplevel.scss. Compilare altri file da soli (ad esempio, child2.scss) genererà errori sulle variabili non definite.

Nel tuo 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)); }); 

Nel tuo registro bussola indica:

 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 tuo screen.scss ha dichiarazioni di importazione errate.

Consiglierei di esaminare le strutture organizzative delle directory di Sass comuni. Il mio preferito è The 7-1 Pattern .

La sua natura divide elementi comunemente usati in altri file, che sono tutti importati da un file main.scss per uccidere le ridondanze.

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