Переменные, объявленные внутри оператора 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}

С этим кодом я бы получил следующую ошибку:

Неопределенная переменная: "! Bg_color".

Answer 1

Переменные Sass видны только для уровня отступа, на котором они объявлены, и тех, которые вложены в него. Так что вам нужно только объявить! 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; }