New Feature: Ranges

[bizzehdee]

At the moment, it is possible to do something such as

.container_@{columnCount} {
margin-left: auto;
margin-right: auto;
width: unit(@baseWidth, px);
}

What would it take to have something in LESS that allows you to do:

.container_[1-24] {

or

.container_[1-@{columnCount}] {

which would then cause less to generate

.container_1,
.container_2,
.container_3,
...,
.container_24 {
/code/
}

I am willing to look into adding this myself, but would need pointing in the right direction as i am new to the LESS codebase.

[dangreen]

Good idea.

[SomMeri]

Off-topic: it is better to close the code in four tics:
````
your code here
````

or add four spaces in from of each line. It will be easier to read and github will not send mails to whoever happen to have the same user name as your variables.

[SomMeri]

Looping support was discussed here #869. The bad news is that the idea was rejected in the end,because there is an existing workaround to this problem. Of course, feel free to make your case there.

That being said, less.js would welcome new coders and pull requests. It is just that the trend is to be careful with features that do not solve new use cases, because each such feature has to be maintained forever and may complicate future development.

The workaround involves looping mixin:

.loop (@index) when (@index > 0) {
  .loop((@index - 1)); 
  // rulesets are defined here
  .container_@{index} {
    property: value;
  }
}
.loop (@index) when (@index =< 0) {
}

.loop(5);

Compiled css is more verbose then what you suggests, but still functionally equivalent:

.container_1 {
  property: value;
}
.container_2 {
  property: value;
}
.container_3 {
  property: value;
}
.container_4 {
  property: value;
}
.container_5 {
  property: value;
}

[lukeapage]

The biggest issue is the syntax.. making something that isn't being used and will never be used in the future for css.

[calvinjuarez]

Actually, with &:extend(), you can get exactly the same output with the .loop(@index) mixin technique like this:

.example-1 {
  /* stuff */
}
.example {
    // Set the Loop (see footnote [1])
    .loop(@index) when (@index > 1) {
        .loop((@index - 1));
        &-@{index} {
            &:extend(.example-1);
        }
    }
    .loop(@index) when (@index =< 1) { }

    // Generate
    .loop(5);
}

Which outputs this:

.example-1,
.example-2,
.example-3,
.example-4,
.example-5 {
    /* stuff */
}

[1] Including the loop inside the base class prefix scopes it so it won't interfere with any other .loop()s you may want to have in other places.

Tested with CodeKit and at less2css.org.

[lukeapage]

Merge to #1694