未计算语义网格宽度

Question

我决定尝试语义网格http://semantic.gs/，因为我真的很喜欢将所有网格逻辑都放在 less 中的概念，而不必像我一直在使用的引导网格中那样向 HTML 添加类最近。

我的问题是我找不到我遇到的问题的文档或参考资料：

我将 import grid.less 放在我的主目录中。

然后在我的 general.less 中定义 .column(12);例如。

问题出在浏览器中：

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

当然是无效属性。

就像 less 没有编译那部分，但它肯定在编译，所以我有点卡在这里。以前有没有人遇到过这个问题，任何帮助将不胜感激。

---

我不得不提到我编译到一个 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 文件似乎是为与旧的 less 版本一起工作而编写的，如果新的 less 版本没有完全包含在括号中，则它们会忽略数学运算。已修复该问题并按预期工作，希望对遇到此问题的其他人有用。

我想关于维护该网格的说法不太好，无论如何都会尝试一下。

//------------编辑-----------//

似乎严格的数学是问题所在，而不是来源。

正如@seven-phases-max 提到的，在某种程度上，我的环境中默认开启了严格的数学运算。

在我的 grunt-contrib-less 选项中，我有 strictMath: false 但应该是 strictMaths: false

我刚刚修复了该测试并且可以正常工作。感谢您帮助我理解问题。

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

正确的应该是 strictMath: false in gruntfile strictMaths: false 只是忽略，实际上删除了该行并解决了问题：/