tutorial - sass問題



在if語句中聲明的變量會導致“未定義的變量” (1)

我希望在一個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}

有了這個代碼,我會得到以下錯誤:

未定義的變量:“!bg_color”。


Sass變量只能在聲明級別和嵌套級別下才可見。 所以你只需要在for循環之外聲明!bg_color:

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




sass