Question

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

我的问题是我无法找到问题的文档或参考资料：

我在我的主要文件中放入了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文件似乎是为了使用较旧的较少版本而编写的，如果它们没有完全包含在括号中，则新的较少版本会忽略数学运算。修正了并按预期工作，希望对遇到此问题的其他人有用。

我猜这个网格的维护并不是那么好，无论如何都会尝试一下。

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

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

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

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

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

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

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

语义网格宽度未计算

1 个答案: