Css 未计算语义网格宽度

我决定尝试使用语义网格，因为我非常喜欢将所有网格逻辑都放在less中，而不必像我最近使用的引导网格那样将类添加到HTML中

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

我把import grid.less放在主目录中

然后在我的概述中，我定义了.column12；比如说

问题出在浏览器中，我得到：

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';    

一般

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

无网格语义网格系统

/////////////////
// 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%);

---

最后找出问题所在

grid.less文件似乎是为了与旧版本的less一起使用而编写的，而新版本的less如果没有完全包含在括号中，则会忽略数学运算。修正了这个问题，并按预期工作，希望对遇到此问题的其他人有用

我想这并不能很好地说明电网的维护，无论如何，我会尝试一下

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

看起来问题出在严格的数学上，而不是源头

正如@seven phases max所提到的，在我的环境中，严格的数学在某种程度上是默认打开的

在我咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕

我刚把它修好，经过测试可以正常工作。谢谢你帮助我理解这个问题

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

正确的一个应该是strictMath:在GrunFile中为false

---

StrictMath:false被忽略了，事实上删除了这一行并解决了这个问题：//

如果你试图计算宽度，你不需要使用'calc'属性，但这是semanticgs的源，我使用它，因为它们非常简单，我不应该修改源，对吗？很遗憾，我无法复制这个问题，我可能会检查你的版本？：@Mikeddt这是对该行为的最终解释，这是通过选项控制的。而且它实际上在默认情况下是关闭的，即使在较新的版本中也是如此。因此，此选项已在生成环境中的某个位置启用。@seven Phase max my grunt contrib less选项为：false@seven-在答案中检查我的编辑，你是对的，这很奇怪。grunt contrib-less文档将其指定为strictMath，我查看了它的源代码，这似乎是正确的。我猜它现在是这样工作的，只是因为StrictMathematics实际上没有效果，grunt contrib less下降到默认值“off/false”。仍然很神秘为什么显式严格数学：false不起作用。