我决定尝试语义网格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';
一般.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%);