Question

我最近只是在玩LESS。我想为具有数字ID的元素生成规则。在某些阶段，我得到了这样的代码：

@myRule: {padding: 0;};

.myLoop(@c, @rules) when (@c >= 0) {
    .myLoop((@c - 1), @rules);
    &[id*=@{c}] { @rules(); }
    &[name*=@{c}] { @rules(); }
}

.myClass {
  .myLoop(2, @myRule);
}

编译为

.myClass[id*=0] {
  padding: 0;
}
.myClass[name*=0] {
  padding: 0;
}
.myClass[id*=1] {
  padding: 0;
}
.myClass[name*=1] {
  padding: 0;
}
.myClass[id*=2] {
  padding: 0;
}
.myClass[name*=2] {
  padding: 0;
}

我的问题是：我能以任何方式编译成这样的：

.myClass[id*=0],
.myClass[name*=0],
.myClass[id*=1],
.myClass[name*=1],
.myClass[id*=2],
.myClass[name*=2] {
    padding: 0;
}

我一直在寻找类似'扩展mixins`，'参数扩展'或'扩展规则集'的东西，但都会导致'wontfix'或'nice-to-have'的问题:-)所以我猜它不是但是可能的，但是我想向那些对我更熟悉的人伸出援手，确定。

Answer 1

是的，目前无法扩展参数化mixins和范围扩展，因此实现结果的最简单方法是扩展虚拟规则集。 E.g：

.my-repeat(@i, @f) when (@i >= 0) {
    .my-repeat((@i - 1), @f);
    &[id*=@{i}], &[name*=@{i}] {@f();}
}

.my-class-style {
    padding: 0;  
}

.my-class {
    .my-repeat(2, {
        &:extend(.my-class-style); 
    });
}

其中.my-class-style也是出现在结果CSS中的虚拟选择器。

玩LESS - 通过将规则集传递给mixin来优化生成的css

1 个答案: