Semantic grid width not being calculated

Question

I decided to give a try to semantic grid http://semantic.gs/ as I really like the concept of having all the grid logic in the less without having to add classes to the HTML as in bootstrap grid that is the one I have been using lately.

My problem is that I cant find documentation or references for the problem im having:

I put import grid.less in my main.

Then in my general.less im defining the .column(12); for example.

The problem is in the browser im getting :

width: 100%*((((20+60)*12)-20) / (60*12) + (20*12) * 1px); 

and of course as invalid property.

Is like less is not compiling that part but it is compiling for sure so I got a little stuck in here. Did anyone cross with this issue before, any help will be appreciated.

---

I have to mention that im compiliong to a main.css that then is linked in the page, im not using the less.js in the webpage, that is the examples im seeing in their site, but that shouldnt be affecting at all, or yes?

---

Code example is

main.less (This file is compiled using grunt into main.css)

//------------------------------//
//-------------LIBRARIES ------//
//------------------------------//

@import 'less/normalize.less';   
@import 'less/mixins.less';
@import 'less/grid.less';   

//------------------------------//
//-------------GENERAL--------//
//----------------------------// 

@import 'less/variables.less'; 
@import 'less/general.less';    

General.less

header, footer { 
  margin:0;
  overflow:hidden;
  .column(6);
}

grid.less (semantic grid system)

/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////

// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@columns: 12;

// Utility variable — you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @gridsystem-width;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// @min-width: 960;
// @correction: 0.5 / @min-width * 100 * 1%;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
    *zoom:1;

    &:before,
    &:after {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
    }
}


//////////
// GRID //
//////////

body {
    width: 100%;
    .clearfix;
}

.row(@columns:@columns) {
    display: block;
    width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
    margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
    // *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
    // *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
    .clearfix;
}
.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);
    // *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
    // *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
}
.push(@offset:1) {
    margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}
.pull(@offset:1) {
    margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}

The output is

width: 100%*((((20+60)*6)-20) / 100%);

Answer 1

Finally spot the problem.

The grid.less file seems to be written to work with older less versions, new less versions ignore the math operations if they are not fully contained in a parenthesis. Fixed that and work as expected, hope is usefull for someone else running into this problem.

I guess doesnt speaks so good about maintenance of that grid, anyway will give it a try.

//------------EDIT-----------------------//

It does seems the strict math was the problem, not the source.

as @seven-phases-max mentioned, in some way strict math was turned on by default in my environment.

In my grunt-contrib-less options i had strictMath: false but shoulded be strictMaths: false

I just fixed that tested and works. Thanks for helping me understand the issue.

//---------------------------------------//

correct one should be strictMath: false in gruntfile strictMaths: false is just ignored, in fact deleted the line and solved the problem also :/