所以我想少建构我的网格。 我使用较少页面上描述的列方法(http://lesscss.org/features/#loops-feature)。但是当我运行它时出现错误。 54减去css:最大的调用堆栈大小,循环回路
Error: Maximum call stack size exceeded in file /assets/less/grid.less line no. 54
行是我发起的环.loop(@grids, (@grids + 1));
如果我删除.generate-offset(@n, @tag, (@i + 1));
的混入我得到另一个错误内。
Error: Cannot read property 'denominator' of undefined in file/assets/less/grid.less line no. 54
然而,当我手动运行混入我的工作就像一个魅力。 例如
.generate-columns(2, xs);
.generate-offset(2, xs);
如果我运行.loop
混入没有.generate-columns
和.generate-offset
混入它的工作原理,以及和运行的3倍预期(由于3个断点)。
任何想法为什么我结合两者时会出现这些错误?
@prefixes: 'sm', 'md', 'lg';
@breakpoints: '0', '100rem', '140rem';
@columns: '2','6','12';
.generate-offset(@n, @tag, @i: 1) when (@i < @n) {
[email protected]{tag}[email protected]{i} {
margin-left: (@i * 100%/@n);
}
.generate-offset(@n, @tag, (@i + 1));
}
// Grid loops
.loop(@index, @count) when (@index > 0){
// extract variables
@current: (@count - @index);
@prefix: e(extract(@prefixes, @current));
@breakpoint: e(extract(@breakpoints, @current));
@column: e(extract(@columns, @current));
@media (min-width: @breakpoint) {
.generate-columns(@column, @prefix);
.generate-offset(@column, @prefix);
}
.loop ((@index - 1), @count);
}
// run
@grids: length(@breakpoints);
.loop(@grids, (@grids + 1));
SOLUTION:
万一有人有同样的问题,我的最终代码现在看起来是这样。
@prefixes: sm, md, lg;
@breakpoints: 0, 100rem, 140rem;
@columns: 2,6,12;
// ********************
// Column Mixin
//
.generate-columns(@n, @tag, @i: 1) when (@i =< @n) {
[email protected]{tag}[email protected]{i} {
flex: 0 0 (@i * 100%/@n);
}
.generate-columns(@n, @tag, (@i + 1));
}
// Offset Mixin
//
.generate-offset(@col, @tag, @i: 1) when (@i < @col) {
[email protected]{tag}[email protected]{i} {
margin-left: (@i * 100%/@col);
}
.generate-offset(@col, @tag, (@i + 1));
}
// Make grid
//
.make-grid(@breakpoint, @cols, @pref) {
& when(@breakpoint > 0){
@media(min-width: @breakpoint) {
.generate-columns(@cols, @pref);
.generate-offset(@cols, @pref);
}
}
& when(@breakpoint = 0){
.generate-columns(@cols, @pref);
.generate-offset(@cols, @pref);
}
}
// Run make-grid for every breakpoint
//
.loop(@index) when (@index > 0){
// run loop first to change order
.loop ((@index - 1));
.make-grid(
extract(@breakpoints, @index),
extract(@columns, @index),
extract(@prefixes, @index)
);
}
.loop(length(@breakpoints));
第一件事,第一,你的循环woild运行四次,但只有三个断点。为了查看可能存在的其他错误,您应该向我们展示您的完整代码。 '@ prefixes','@ columns' variablea有什么? – Harry 2015-02-01 06:13:32
你当然是对的(现在改回来了,那只是为了测试)。 我现在添加了其他2个变量。这有帮助吗? – 2015-02-01 10:30:35