2

so I want to have less construct my grid. I use the columns method described on the less page (http://lesscss.org/features/#loops-feature). But I get an error when I run it.

Error: Maximum call stack size exceeded in file /assets/less/grid.less line no. 54

Line 54 is where I initiate the loop .loop(@grids, (@grids + 1));

If I remove the .generate-offset(@n, @tag, (@i + 1)); inside the mixin I get another error.

Error: Cannot read property 'denominator' of undefined in file/assets/less/grid.less line no. 54

However when I run the mixin manually I works like a charm. e.g.

.generate-columns(2, xs);
.generate-offset(2, xs);

If I run the .loop mixin without the .generate-columns and .generate-offset mixins it works as well and runs 3 times as expected (due to the 3 breakpoints).

Any ideas why I get those errors when combining both?

@prefixes: 'sm', 'md', 'lg';
@breakpoints: '0', '100rem', '140rem';
@columns: '2','6','12';

.generate-offset(@n, @tag, @i: 1) when (@i < @n) {
  .offset--@{tag}-@{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:

Just in case someone has the same problem, my final code now looks like this.

@prefixes: sm, md, lg;
@breakpoints: 0, 100rem, 140rem;
@columns: 2,6,12;
// ********************
// Column Mixin
//
.generate-columns(@n, @tag, @i: 1) when (@i =< @n) {
  .column--@{tag}-@{i} {
    flex: 0 0 (@i * 100% / @n);
  }
  .generate-columns(@n, @tag, (@i + 1));
}
// Offset Mixin
//
.generate-offset(@col, @tag, @i: 1) when (@i < @col) {
  .offset--@{tag}-@{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));
2
  • First thing first, your loop woild run four times but there are only three breakpoints. For seeing what other errors could possibly be there you should show us your full code. What does the @prefixes, @columns variablea have?
    – Harry
    Feb 1, 2015 at 6:13
  • You are right of course (changed it back now, that was just for testing). I added the other 2 variables now. Does this help? Feb 1, 2015 at 10:30

1 Answer 1

2

The problem in your case is because the e() (or ~()) function's output is always a string and you cannot use it to perform mathematical operations or comparisons etc. You can verify this by adding the below line in your @media query (and commenting out the mixin calls).

columnIsNumber: isnumber(@column); 
/* with your current method this will always return false */

To overcome this issue, you should avoid using the e() function for any variable which you would like to perform a mathematical operation on. For instance, you can change your mixin to be like below (refer inline comments for changes made):

@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) {
  .offset--@{tag}-@{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));

Of-course you could do it with your own code (with quotes in variable declaration and e() in the mixin) using a bit of JS evaluation. But I wouldn't recommend this approach as it just adds to the complexity in my view.

@media (min-width: @breakpoint) {
    .generate-columns(@column, @prefix);
    @col: `function(){return @{column}}()`; /* JS evaluation */
    /*columnIsNumber: isnumber(@col);*/
    .generate-offset(@col, @prefix);
}

or

@media (min-width: @breakpoint) {
    .generate-columns(@column, @prefix);
    @col: `function(){return parseInt(@{column},10)}()`; /* JS evaluation */
    /*columnIsNumber: isnumber(@col);*/
    .generate-offset(@col, @prefix);
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.