Le variabili dichiarate all'interno di un se i risultati economico “variabile non definita”

Question

Speravo che definire le variabili in un'istruzione if funzionerebbe in Sass ma purtroppo ho ottenere gli errori che dicono che la variabile non è definita. Ecco quello che ho provato:

@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 questo codice, vorrei avere il seguente errore:

  

Variabile non definita:. "! BG_COLOR"

Answer 1

variabili Sass sono visibili solo al livello di rientro in cui sono dichiarati e quelli annidati sotto di esso. Quindi, avete solo bisogno di dichiarare BG_COLOR di fuori del proprio 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}

E si otterrà il seguente 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; }