LESS：檢索和風格定義中使用通配符值

Question

我有類稱爲.col- [1-24]，例如，.COL-1，.COL-2，.COL-3等

我想要實現以下目標：

.col-$varname { 
    width: @varname 
} 

...其中@varname是一個不太變量和$ 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; 
}