How to generate CSS with loop in less

Question

I am not familiar with Less. In my understanding, I think Less can transform the less format file to standard css file(if I am wrong, please correct me). Now I have a question below.

Say you would generate 100 CSS classes like below(from .span1 to .span100) in a single CSS file. I want to know whether less can generate a CSS file like it?

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

Answer 1

Try this:

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

Output:

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

You can try it out on less2css.

Edit April 3, 2014

Here is a more flexible version with more options:

.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  {

  @size : @base-value+@_s;
  @{selector}@{j}{
    @{property} : ~"@{size}@{unit}";
  }
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@_s+@step-size) , @step-size,  @selector, @property);
}

You can call this by only @n which is the required argument:

.custom-loop(@n:3);

Which will output:

.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}

But if you want to have control over each parameter, here is an example using all custom parameters:

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

This will output:

.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}

Parameter descriptions

1. @n : integer, The number of iterations.

2. @base-value (optional): integer, The starting value for the loop to be assigned to the property. Default value is the same is the value assigned for the number of iterations @n.

3. @unit (optional): string, The unit for the property. Default value is px.

4. @property (optional): non-string or string The CSS property. Default value is width

5. @selector (optional): escaped string, The selector used for the loop. Could be anything as long as it is passed in as a escaped string.

6. @step-size (optional): integer, The value by which the loop increments by.

NOTES

Note 1: The custom selector is passed in as a escaped string. If it is not escaped, it is not going to work as expected.

Note 2: The mixin is called by explicitly using the parameter name. This has some advantages and disadvantages:

Note 3: The unit is passed in as a string.

Advantages

1. It is clear what parameter is called
2. You don't have to rely on the order of parameters and remember which parameter comes first, second, …

Disadvantages

1. I guess it looks a bit ugly ?
2. (add to the list and/or change the implementation if you know a better one)