变量内的声明，如果声明的结果“未定义的变量”

Question

我希望在if语句定义变量会在萨斯工作，但不幸的是我得到的错误说，该变量没有定义。这里是我的尝试：

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

使用这个代码，我会得到以下错误：

  

未定义变量： “！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; }