Variablen, die innerhalb einer if-Anweisung Ergebnisse in „undefinierte Variable“ erklärt

Question

Ich habe gehofft, dass Variablen in einer if-Anweisung definieren, in Sass funktionieren würde, aber leider bekomme ich Fehler zu sagen, dass der Variable nicht definiert ist. Hier ist, was ich versucht:

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

Mit diesem Code, würde ich die folgende Fehlermeldung erhalten:

  

Nicht definierte Variable. "! Bg_color"

Answer 1

Sass Variablen sind nur sichtbar, auf das Niveau der Vertiefung an dem sie deklariert sind und jene, darunter verschachtelt. Sie müssen also nur erklären bg_color außerhalb Ihrer for-Schleife:

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

Und Sie werden die folgenden CSS erhalten:

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