SASS ignora variables, definidas en if-statement

Tengo un archivo llamado style.scss con el siguiente código:

@import 'variables'; body { color: $text-color; background: $background-color; } 

Y una parte llamada _variables.scss:

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

La instrucción if funciona correctamente, pero las variables definidas en el interior no funcionan. Cuando bash comstackrlo, sigo obteniendo:

Error de syntax: variable no definida: “$ text-color”.

Eso es completamente esperado. Las variables tienen un scope para ellos. Si los defines dentro de un bloque de control (como una instrucción if ), entonces no estarán disponibles fuera. Entonces, lo que necesita hacer es inicializarlo afuera así:

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

O…

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

Aunque sería menos detallado usar la función if() como esta:

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

Si bien este ejemplo es aún más detallado, elimina la necesidad de establecer dos variables vacías:

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

Sin embargo, el segundo y tercer ejemplos de @ cimmanon son mucho mejores.