Question

所以我的代码存在类型的主要问题，我似乎无法解决它。

每当我从第1行中减去8时，都会出现问题我该如何解决这个问题？

@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);

Answer 1

除了您可以在this SO answer中找到的方法（正如我在上面的评论中已经提到的那样），我认为整个代码段可以简化为（小于1.5.x或更高）：< / p>

@column-widths: 30, 40, 55, 500; // etc.

.loop-column(@index) when (@index > 0) {
    .loop-column(@index - 1);

    @min:  extract(@column-widths, @index);
    @max: (extract(@column-widths, @index + 1) - 1);

    @media (min-width: @min) and (max-width: @max) {
        [data-deckgrid="card"]::before {
            content: "@{index} .column.card-column-@{index}";
        }
    }
}

.loop-column(length(@column-widths) - 1);

使用以下CSS结果：

@media (min-width: 30) and (max-width: 39) {
  [data-deckgrid="card"]::before {
    content: "1 .column.card-column-1";
  }
}
@media (min-width: 40) and (max-width: 54) {
  [data-deckgrid="card"]::before {
    content: "2 .column.card-column-2";
  }
}
@media (min-width: 55) and (max-width: 499) {
  [data-deckgrid="card"]::before {
    content: "3 .column.card-column-3";
  }
}

即。你不需要通过索引变量名来模拟数组＆＃34;因为你可以直接使用数组（Less数组只是逗号或空格分隔的值列表，例如@padding: 1 2 3 4;）。

较少的变量：这是可能的吗？

1 个答案: