SASS ignore les variables, définies dans if-statement

J'ai un fichier nommé style.scss avec le code suivant:

@import 'variables';

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

Et une partielle nommé _variables.scss:

$colorscheme: white;

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

Le if fonctionne correctement, mais les variables définies à l'intérieur, ne fonctionnent pas.
Lorsque j'essaie de compiler, je reçois:

Erreur de syntaxe: Undefined variable: “$texte-couleur”.

source d'informationauteur Afterlame

  1. 29

    C'est tout à fait prévu. Les Variables ont un portée. Si vous les définir à l'intérieur d'un bloc de contrôle (comme un if déclaration), alors ils ne seront pas disponibles à l'extérieur. Donc, ce que vous devez faire est d'initialiser l'extérieur comme suit:

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

    Ou...

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

    Même si ce serait moins verbeux pour utiliser le if() fonction comme ceci:

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

    Bien que cet exemple est même plus détaillé, il élimine la nécessité de définir deux vide variables:

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

    @cimmanon 2e et 3e exemples sont beaucoup mieux, mais.