SASS ignora le variabili, definite in se-dichiarazione

Question

Ho un file chiamato style.scss con il seguente codice:

@import 'variables'; 

body { 
    color: $text-color; 
    background: $background-color; 
} 

E un parziale di nome _variables.scss:

$colorscheme: white; 

@if $colorscheme == white { 
    $text-color: #333; 
    $background-color: #fff; 
} 
@else { 
    $text-color: #ccc; 
    $background-color: #333; 
} 

Il se- la dichiarazione funziona correttamente, ma le variabili definite all'interno non funzionano. Quando provo a compilarlo, continuo a ricevere:

Syntax error: Undefined variable: “$text-color”.

Answer 1

che è completamente previsto. Le variabili hanno uno scope. Se li definisci all'interno di un blocco di controllo (come una dichiarazione if), non saranno disponibili all'esterno. Allora, che cosa dovete fare è inizializzare fuori in questo modo:

$text-color: null; 
$background-color: null; 
@if $colorscheme == white { 
    $text-color: #333; 
    $background-color: #fff; 
} 
@else { 
    $text-color: #ccc; 
    $background-color: #333; 
} 

Oppure ...

$text-color: #ccc; 
$background-color: #333; 
@if $colorscheme == white { 
    $text-color: #333; 
    $background-color: #fff; 
} 

Anche se sarebbe meno prolissa di utilizzare la funzione di if() in questo modo:

$text-color: if($colorscheme == white, #333, #ccc); 
$background-color: if($colorscheme == white, #fff, #333); 

Answer 2

Mentre questo esempio è anche altro verbose, elimina la necessità di impostare due variabili vuote:

@if $colorscheme == white { 
    $text-color: #333 !global; 
    $background-color: #fff !global; 
} @else { 
    $text-color: #ccc !global; 
    $background-color: #333 !global; 
} 

@ cimmanon 2 e 3 esempi sono molto meglio, però.