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

根据link指示的Roddy of the Frozen Peas，是的，可以进行循环，但只有将它用于数值才有意义。对于您的情况，我建议使用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);
}
/* ... */

是否可以在lesscss forloop中放置多个CSS规则？

2 个答案: