Las variables declaradas dentro de una instrucción if dan como resultado "variable indefinida"

Question

Esperaba que la definición de variables en una sentencia if funcionara en Sass, pero desafortunadamente recibo errores que dicen que la variable no está definida. Esto es lo que he intentado:

@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} 

Con este código, me gustaría tener el siguiente error: Las variables

Undefined variable: "!bg_color".

Answer 1

Sass son accesibles solamente a nivel de hendidura en el que se declaran y los anidados debajo eso. Por lo que sólo necesita declarar bg_color fuera de su ciclo for:

!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} 

Y obtendrá el siguiente CSS:

#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; }