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]）：

<强> LESS

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