Question

Is it possible to put the following in a lessCSS forloop so that just the number of each section variable will update from section1 through to section4 with each loop?

// loop starts

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

// loop ends

thanks!

Answer 1

According to the link indicated by Roddy of the Frozen Peas, yes it is possible to do a loop, but it only makes sense to use it for numeric values​​. For your case, I recommend using the mixins, including to improve code readability:

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

The result:

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