LESS variables: Is this possible

Question

So my code is having a major issue with types and I can't seem to solve it.

Whenever I subtract 1 from line 8 there are issues.
How can I resolve this?

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

See very similar question I answered just today: http://stackoverflow.com/q/21932983/2712740 — seven-phases-max, Feb 21 '14 at 18:15

score 2 · Accepted Answer · edited May 23 '17 at 12:03

In addition to the method you can find in this SO answer (as I have already mentioned in my comment above), I think the whole snippet can be simplified to something like (Less 1.5.x or higher):

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

with the following CSS result:

@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";
  }
}

I.e. you don't need to emulate arrays via "indexing variable names" since you can use arrays directly (Less array is just a comma or space separated value list, e.g. @padding: 1 2 3 4;).

LESS variables: Is this possible

1 Answers1

Linked