LESS:在样式定义中检索并使用通配符值

Question

我有一个名为.col- [1-24]的课程,例如.col-1,.col-2,.col-3等.

我想实现以下目标:

.col-$varname {
  width: @varname
}

...其中@varname是一个LESS变量,概念上,$ varname是一个变量选择器,其值将传递给@varname.

放置它的另一种方法是任何.col-X的宽度应为@ col-X.

这对于LESS,或者如果没有,用CSS可能吗？

Answer 1

当然可以(更新以允许灵活的单位和灵活的财产价值[LESS 1.6]):

减

.makeIndexProp(@max, @class-prefix, @unit: px, @prop: width,  @i:1) when (@i <= @max) {
  .@{class-prefix}@{i} {
    @{prop}: unit(@i, @unit);
  }
  .makeIndexProp(@max, @class-prefix, @i:(@i+1));
}

.makeIndexProp(5, col-);

CSS输出

.col-1 {
  width: 1px;
}
.col-2 {
  width: 2px;
}
.col-3 {
  width: 3px;
}
.col-4 {
  width: 4px;
}
.col-5 {
  width: 5px;
}