Ширина семантической сетки не рассчитывается

Question

Я решил попробовать семантическую сетку http://semantic.gs/ как мне действительно нравится концепция наличия всей логики сетки без необходимости добавлять классы в HTML, как в загрузочной сетке, которая у меня есть. использовал в последнее время.

Моя проблема в том, что я не могу найти документацию или ссылки на проблему, которую я имею:

Я поставил import grid.less в моей главной.

Тогда в моем общем. Я определяю.column(12); например.

Проблема в браузере, который я получаю:

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

и конечно как недействительное свойство.

Как будто меньше не компилирует эту часть, но компилирует наверняка, поэтому я немного застрял здесь. Кто-нибудь сталкивался с этой проблемой раньше, любая помощь будет оценена.

---

Я должен упомянуть, что я собираю файл main.css, который затем связывается на странице, я не использую less.js на веб-странице, то есть примеры, которые я вижу на своем сайте, но это не должно влиять вообще, или да?

---

Пример кода

main.less (Этот файл скомпилирован с использованием grunt в 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.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);
}

Выход

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

Answer 1

Наконец, определите проблему.

Кажется, что файл grid.less написан для работы с более старыми версиями поменьше, новые версии поменьше игнорируют математические операции, если они не полностью содержатся в скобках. Исправлено и работает как положено, надежда полезна для кого-то еще, кто сталкивается с этой проблемой.

Я думаю, что не говорит так хорошо об обслуживании этой сетки, в любом случае даст ей попробовать.

//------------РЕДАКТИРОВАТЬ-----------------------//

Кажется, проблема была в строгой математике, а не в источнике.

как уже упоминалось @ seven-phase-max, в моей среде в некотором роде была включена строгая математика.

В моих опциях grunt-contrib-less у меня был strictMath: false, но должен быть строгий Maths: false

Я только что исправил, что проверено и работает. Спасибо, что помогли мне понять проблему.

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

правильный должен быть строгим: ложь в gruntfile строгие значения: ложь просто игнорируется, фактически удаляет строку и также решает проблему: /