variables - allows - sass control directives

SASS ignora las variables, definidas en la sentencia if

Question

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

@import ''variables'';

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

Y un parcial llamado _variables.scss:

$colorscheme: white;

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

La sentencia if funciona correctamente, pero las variables definidas en el interior no funcionan. Cuando intento compilarlo, sigo recibiendo:

Error de sintaxis: Variable no definida: “$ text-color”.

Answer 1

Eso es completamente esperado. Las variables tienen un alcance para ellos. Si los define dentro de un bloque de control (como una sentencia if ), entonces no estarán disponibles fuera. Entonces, lo que necesitas 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() esta manera:

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

Answer 2

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, los ejemplos 2 y 3 de @cimmanon son mucho mejores.