Idea: loop support

[alimd]

what is your idea about supporting looping (while, for, do) in less

something like this for create a grid system

@i: 1;
while(@i<24){
  `".w@{i}" {
     width: (@i*30+(@i-1)*10)px;
  }
@i++;
}

and compiled to

w1{
  width:  30px;
}
w2{
  width:  70px;
}
w3{
  width:  110px;
}
...

is there any way to write plugin or addon for less ?

[alimd]

like SCSS

[matthew-dean]

As far as I know, @cloudhead is firmly against it, since it's not declarative. I'm not personally an authority of what a declarative language is or isn't, but as far as I understand, it's basically sets of straightforward declarations. THIS property is THAT value. XML is declarative. Both CSS and LESS are declarative, making them close cousins. However, SCSS is not. It's more like a scripting language (like VBScript), mimicking the syntax of CSS.

By making LESS declarative, it's essentially CSS+. It's CSS with more values, variables, and guards. It's intended as an "extension" as CSS. In contrast, SCSS has evolved as a programming language with the syntax of CSS, blending some scripting with some declarations, making it overall a tad schizophrenic. It also makes it more powerful, but can be more challenging to master as a result.

So the long and short: I don't see this happening.

[alimd]

do you mean you dont want to do this ?

i thing its very very useful feature.
and You can not convince me.

you can add some new feature like this and be a best solution for modern css

if is there any way to write plugin or addon for less.
and if you some little help to me, i will write it.

[matthew-dean]

My goal is not to convince you. You're welcome to have any opinion you wish on what's useful. :-)

You asked if this would be supported in LESS, and my answer is that likely, it will not be, but it's also not up to me.

As far as a plugin, it's an interesting idea. Nothing like that exists, currently. However, you could download / fork LESS and make any modifications to the source code you like for your own project.

[lukeapage]

looping is unofficially supported. just call the mixin recursively and use guards e.g. (from twitter bootstrap)

.spanX (@index) when (@index > 0) {
  (~".span@{index}") { .span(@index); }
  .spanX(@index - 1);
}
.spanX (0) {}

[alimd]

@agatronic nice idea tanx

[alimd]

@MatthewDL tank you very much.
i need to understand your design pattern and less algorithm.
i try to reverse engineering but It takes too much time.
is there any documentation for developers ?

[matthew-dean]

All documentation for LESS is on http://lesscss.org/

Thanks @agatronic. I figured there was a way but couldn't think of it offhand. Maybe we should add a LESS design patterns wiki.