cloudhead/less.js — Issue #696: Support to interpolation to rules name
Author: david-proweb
Created: 2012-03-09 03:32:09+00:00
State: open

I closed the [old topic](https://github.com/cloudhead/less.js/issues/646#issuecomment-4376535) to make it more specific.

Currently LESS have support to string interpolation and scape for values. It's possible make it work on rules name?
For instance:

```
@name: "span";
~".@{name}" { font-size: 12px; }
```

Resulting in:

```
.span { font-size: 12px; }
```

So, finally, we can do it work:

```
@columns: 12;

.span-n(@i) when (@i < @columns + 1) {
~".span@{i}" {
width: 60px * @i;
}

.span-n(@i + 1);
}

.span-n(@i) {
}

.span-n(1);
```

Resulting in:

```
.span1 { width: 60px; }
.span2 { width: 120px; }
...
```

It's very useful to make LESS more flexible on variables. For instance: you will can configure a namespace for a project, like:

```
@namespace: "base";

...
~"#@{namespace}" {
// content
}
```