是否可以在less.CSS forloop中放入多个CSS规则

Question

是否可以将以下内容放入lessCSSforloop中，以便每个部分变量的编号在每个循环中从section1更新到section4？

//循环启动

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

//环路结束

谢谢！

Answer 1

根据Frozen Peas的Roddy指示的链接，是的，可以进行循环，但只有将其用于数值才有意义​​.对于您的情况，我建议使用mixin，包括提高代码可读性：

#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);
}
/* ... */