leafo/lessphp — Issue #202: incompatibility with less.js: scope of variables and blocks
Author: nlac
Created: 2012-02-27 21:46:29+00:00
State: open

Hi leafo,

le me share below a short but advanced less example has been compiled perfectly with less.js but unfortunately only partially with lessphp.

In short, it is about the ability to write a mixin what uses variables and mixins getting values only when evaluating the mixin inside a namespace block. This feature enables to parametrize a mixin in an extended way, not just by using the mixin function parameters or global variables. That would be really great implemented it into lessphp.

See the less code below shows what i'm talking about - again, less.js compiles it fully.

```css
/**
* #lib > .crazylist(): advanced mixin, works with some mixins and values
* recent in another scopes (.BASE(), @COLOR1, @COLOR2)
**/

#lib {
.crazylist(@fs : 12px) {

.BASE();
@fontSize : @fs;

> * {
background-color: @COLOR1;
font-size: 1px+@fontSize;

&:nth-child(2n+1) {
background-color: @COLOR2;
font-size: -1px+@fontSize;
}
}
}
}

/**
* Some namespaced mixins evaluating the #lib > .crazylist() mixin
* by different "parameters" from their own scope
**/
#skin1 {
@COLOR1 : #ddd;
@COLOR2 : #bbb;
.BASE() {
border: 1px #000 solid;
}

.list() {
#lib > .crazylist(); //.crazylist NOW will see @COLOR1, @COLOR2, .BASE()
}
}

#skin2 {
@COLOR1 : #ffc;
@COLOR2 : #eeb;
.BASE() {
border: 1px #963 dotted;
}

.list() {
#lib > .crazylist(15px); //.crazylist NOW will see @COLOR1, @COLOR2, .BASE()
}
}

/**
* final HTML classes constructed
**/
.bwlist {
#skin1 > .list();
}

.coloredlist {
#skin2 > .list();
}
```

/**** expected output: ****/

.bwlist {
border: 1px #000 solid;
}
.bwlist > * {
background-color: #dddddd;
font-size: 13px;
}
.bwlist > *:nth-child(2n+1) {
background-color: #bbbbbb;
font-size: 11px;
}
.coloredlist {
border: 1px #963 dotted;
}
.coloredlist > * {
background-color: #ffffcc;
font-size: 16px;
}
.coloredlist > *:nth-child(2n+1) {
background-color: #eeeebb;
font-size: 14px;
}