Les variables déclarées à l'intérieur d'une instruction if résultent en "variable indéfinie"

Question

J'espérais que définir des variables dans une instruction if fonctionnerait dans Sass mais malheureusement j'obtiens des erreurs disant que la variable n'est pas définie. Voici ce que j'ai essayé:

@for !i from 1 through 9 
    !foo = #000 
    @if !i == 1 
     !bg_color = #009832 
    @if !i == 2 
     !bg_color = #195889 
    ... 

    #bar#{!i} 
     color: #{!foo} 
     background-color: #{!bg_color} 

Avec ce code, je recevrais l'erreur suivante:

Undefined variable: "!bg_color".

Answer 1

les variables Sass ne sont visibles au niveau de l'empreinte au cours de laquelle elles sont déclarées et celles imbriquées sous il. Donc, il vous suffit de déclarer bg_color extérieur de votre boucle:

!bg_color = #FFF 
@for !i from 1 through 9 
    !foo = #000 
    @if !i == 1 
     !bg_color = #009832 
    @if !i == 2 
     !bg_color = #195889 

    #bar#{!i} 
     color: #{!foo} 
     background-color: #{!bg_color} 

Et vous obtiendrez le CSS suivant:

#bar1 { 
    color: black; 
    background-color: #009832; } 

#bar2 { 
    color: black; 
    background-color: #195889; } 

#bar3 { 
    color: black; 
    background-color: #195889; } 

#bar4 { 
    color: black; 
    background-color: #195889; } 

#bar5 { 
    color: black; 
    background-color: #195889; } 

#bar6 { 
    color: black; 
    background-color: #195889; } 

#bar7 { 
    color: black; 
    background-color: #195889; } 

#bar8 { 
    color: black; 
    background-color: #195889; } 

#bar9 { 
    color: black; 
    background-color: #195889; }