减去css:最大的调用堆栈大小,循环回路
所以我想少建构我的网格。 我使用较少页面上描述的列方法(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));
你的情况的问题是因为e()
(或~()
)函数的输出始终是一个串,你不能使用它通过添加以下行来执行数学运算或比较等,您可以验证这一点在您的@media
查询中(并注释掉mixin调用)。
columnIsNumber: isnumber(@column);
/* with your current method this will always return false */
为了解决这个问题,你应该避免使用e()
功能,你想在执行数学运算的任何变量。举例来说,你可以改变你的mixin是像下面(指对所做的更改内部注释):
@prefixes: 'sm', 'md', 'lg';
@breakpoints: '0', '100rem', '140rem';
@columns: 2, 6, 12; /* note the exclusion of quotes */
.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);
@breakpoint: e(extract(@breakpoints, @current));
@column: extract(@columns, @current); /* avoid using e() */
@prefix: e(extract(@prefixes, @current));
@media (min-width: @breakpoint) {
.generate-columns(@column, @prefix);
/*columnIsNumber: isnumber(@column);*/
.generate-offset(@column, @prefix);
}
.loop ((@index - 1), @count);
}
// run
@grids: length(@breakpoints);
.loop(@grids, (@grids + 1));
中,当然你可以用自己的代码做(与变量声明和e()
报价在mixin中)使用一点JS评估。但我不会推荐这种方法,因为这只会增加我认为的复杂性。
@media (min-width: @breakpoint) {
.generate-columns(@column, @prefix);
@col: `function(){return @{column}}()`; /* JS evaluation */
/*columnIsNumber: isnumber(@col);*/
.generate-offset(@col, @prefix);
}
或
@media (min-width: @breakpoint) {
.generate-columns(@column, @prefix);
@col: `function(){return parseInt(@{column},10)}()`; /* JS evaluation */
/*columnIsNumber: isnumber(@col);*/
.generate-offset(@col, @prefix);
}
第一件事,第一,你的循环woild运行四次,但只有三个断点。为了查看可能存在的其他错误,您应该向我们展示您的完整代码。 '@ prefixes','@ columns' variablea有什么? – Harry 2015-02-01 06:13:32
你当然是对的(现在改回来了,那只是为了测试)。 我现在添加了其他2个变量。这有帮助吗? – 2015-02-01 10:30:35