未计算语义网格宽度

Question

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

我的问题是，我找不到有关问题的文件或参考资料：

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

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

问题在于浏览器im获取：

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

当然也是无效财产。

就像less不是在编译那个部分，但是它确实在编译，所以我被困在这里了。如果有人在此问题上越界，任何帮助都将不胜感激。

我必须提到的是，im连接到一个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文件似乎是为了处理旧版本更少的版本而编写的，新的更少版本忽略了数学操作，如果它们没有完全包含在括号中。修正了这个问题，并按预期工作，希望对遇到这个问题的其他人是有用的。

我想对电网的维护没什么好说的，反正会试一试的。

//

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

正如@七个阶段-max所提到的，在某种程度上，严格的数学在我的环境中是默认开启的。

在我无怨言的选择中，我有strictMath: false，但应该是strictMaths: false

我刚刚修复了测试和工作。谢谢你帮我理解这个问题。

//？

正确的一个应该是strictMath: false在gruntfile中strictMaths: false被忽略了，实际上删除了这一行并解决了问题:/