Less 减少变量:这可能吗
因此,我的代码在类型方面有一个主要问题,而我似乎无法解决它 无论何时我从第Less 减少变量:这可能吗,less,Less,因此,我的代码在类型方面有一个主要问题,而我似乎无法解决它 无论何时我从第8行减去1,都会出现问题。 我如何解决这个问题 @max-columns: 2; @column-1-width-min: 30; @column-2-width-min: 40; .loop-column(@index) when (@index > 0) { @max-minus-1a: "@{column-@{index}-width-min}"; @max-minus-1b: @max-minus
8行减去1
,都会出现问题。
我如何解决这个问题
@max-columns: 2;
@column-1-width-min: 30;
@column-2-width-min: 40;
.loop-column(@index) when (@index > 0) {
@max-minus-1a: "@{column-@{index}-width-min}";
@max-minus-1b: @max-minus-1a - 1; // problem child
@min: ~"min-width: @{column-@{index}-width-min}";
@max: ~"max-width: @{max-minus-1b}";
@media (@min) and (@max) {
[data-deckgrid="card"]::before {
content: "@{index} .column.card-column-@{index}";
}
}
.loop-column(@index - 1);
}
.loop-column(@max-columns);
除了您可以在中找到的方法(正如我在上面的评论中已经提到的),我认为整个代码片段可以简化为(小于1.5.x或更高版本):
@列宽:30,40,55500;//等
.loop列(@index)何时(@index>0){
.循环列(@index-1);
@min:提取(@列宽,@索引);
@最大值:(提取(@列宽,@索引+1)-1);
@介质(最小宽度:@min)和(最大宽度:@max){
[data deckgrid=“card”]::之前{
内容:“@{index}.column.card column-@{index}”;
}
}
}
.循环列(长度(@列宽)-1);
具有以下CSS结果:
@介质(最小宽度:30)和(最大宽度:39){
[data deckgrid=“card”]::之前{
内容:“1.栏.卡-栏-1”;
}
}
@介质(最小宽度:40)和(最大宽度:54){
[data deckgrid=“card”]::之前{
内容:“2.栏.卡-栏-2”;
}
}
@介质(最小宽度:55)和(最大宽度:499){
[data deckgrid=“card”]::之前{
内容:“3.栏.卡-栏-3”;
}
}
也就是说,您不需要通过“索引变量名”来模拟数组,因为您可以直接使用数组(Less array只是一个逗号或空格分隔的值列表,例如@padding:1 2 3 4;
)。参见我今天刚刚回答的非常类似的问题: