在if语句中声明的变量导致“未定义的变量”

Question

我希望在if语句中定义变量可以在Sass中工作，但不幸的是，我收到错误，指出该变量未定义。这里是我的尝试：

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

有了这个代码，我会得到以下错误：

Undefined variable: "!bg_color".

Answer 1

萨斯变量只能在声明它们和那些下嵌套缩进的水平可见它。所以，你只需要声明bg_color你之外的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} 

，你会得到下面的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; }