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

sass[]

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 intenté:

@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, obtendría el siguiente error:

Variable indefinida: "! Bg_color".

Answer 1

Las variables de Sass solo son visibles para el nivel de sangría en el que se declaran y las que se anidan debajo. Entonces solo necesita declarar! Bg_color fuera de su bucle 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ás 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; }