是否可以在一個lesscss forloop中放置多個CSS規則？

Question

是否可以將下列內容放在lessCSS forloop中，以便每個循環的每個節變量的數量將從section1更新爲section4？

//循環開始

.section1 { 
    .color { 
     color: @section1; 
    } 
    .colorBG-medium{ 
     background-color: @section1; 
    } 
    .colorBG, .tab.active a { 
     background-color: @section1; 
     &:hover{ 
      background-color: @section1; 
     } 
    } 
} 

//循環結束

的感謝！

Answer 1

據Roddy of the Frozen Peas指示的link，是有可能做一個循環，但它纔有意義使用它的數值。對於你的情況，我建議使用mixins，包括提高代碼的可讀性：

#foo { 
    .bar (@color) { 
     .color { color: @color; } 
     .colorBG-medium { 
      background-color: @color; 
     } 
     .colorBG, .tab.active a { 
      background-color: @color; 
      &:hover{ 
       background-color: @color; 
      } 
     } 
    } 
} 

.section1 { 
    #foo > .bar(red); 
} 

.section2 { 
    #foo > .bar(blue); 
} 

結果：

.section1 .color { 
    color: #ff0000; 
} 
.section1 .colorBG-medium { 
    background-color: #ff0000; 
} 
.section1 .colorBG, 
.section1 .tab.active a { 
    background-color: #ff0000; 
} 
.section1 .colorBG:hover, 
.section1 .tab.active a:hover { 
    background-color: #ff0000; 
} 
.section2 .color { 
    color: #0000ff; 
} 
.section2 .colorBG-medium { 
    background-color: #0000ff; 
} 
.section2 .colorBG, 
.section2 .tab.active a { 
    background-color: #0000ff; 
} 
.section2 .colorBG:hover, 
.section2 .tab.active a:hover { 
    background-color: #0000ff; 
} 

Answer 2

實現該結果的一種可能更好的方法是使用mixin。喜歡的東西：

.section-color (@color) { 
    .color { 
     color: @color; 
    } 
    .colorBG-medium{ 
     background-color: @color; 
    } 
    .colorBG, .tab.active a { 
     background-color: @color; 
     &:hover{ 
      background-color: @color; 
     } 
    } 
} 

.section1 { 
    .section-color(red); 
} 
.section2 { 
    .section-color(#123456); 
} 
/* ... */