leafo/lessphp — Issue #176: less.js vs less.php difference
Author: httpete
Created: 2012-01-12 16:15:17+00:00
State: open

I am using the semantic grid system, and everything looks great with less 1.2.0 on the client. I compiled the files with less php, and there is one large difference detailed here. Please note how in less.js the width is in % while in less.php it is in px.

less code:

article {
.column(12);
.rounded();
background-color: #ebebeb;
border: 1px solid #DFDFDF;
min-height: 470px;
#stepbody { margin: 1em; }
}

from less.js compiles to:

article {
background-clip: padding-box;
background-color: #EBEBEB;
border: 1px solid #DFDFDF;
border-radius: 5px 5px 5px 5px;
display: inline;
float: left;
margin: 0 1.04167%;
min-height: 470px;
width: 97.9167%;
}

but less.php does

article {
background-clip: padding-box;
background-color: #EBEBEB;
border: 1px solid #DFDFDF;
border-radius: 5px 5px 5px 5px;
display: inline;
float: left;
margin: 0 1.04167%;
min-height: 470px;
width: 97.916px;
}

the column mixin that is causing the problem is:

.column(@x,@columns:@columns) {
display: inline;
float: left;
width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);
}