Các biến được khai báo bên trong câu lệnh if dẫn đến "biến không xác định"

Question

Tôi đã hy vọng rằng việc xác định các biến trong câu lệnh if sẽ hoạt động trong Sass nhưng tiếc là tôi nhận được lỗi nói rằng biến không được xác định. Đây là những gì tôi đã cố gắng:

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

Với mã này, tôi sẽ nhận được lỗi sau: biến

Undefined variable: "!bg_color".

Answer 1

Sass chỉ hiển thị cho mức độ thụt đầu dòng mà tại đó chúng được khai báo và những lồng bên dưới nó. Vì vậy, bạn chỉ cần khai báo bg_color bên ngoài của bạn cho vòng lặp:

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

Và bạn sẽ nhận được css sau:

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