if文の中で宣言された変数は "undefined variable"になります

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