8

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"。

4

1 に答える 1

11

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; }
于 2009-10-04T00:38:37.933 に答える