css - 是否可以在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

根据冷冻豌豆的罗迪指出的链接，是的，可以进行循环，但仅将其用于数值才有意义​​​。对于您的情况，我建议使用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);
}
/* ... */