at-breakpoint, with-grid-settings infinite loop

Question

I just want to apply another grid-layout at an special breakpoint (maybe I'm doing it wrong ant thats the reason for my problem...)

If I try the following code I geht the error:

An @include loop has been found: at-breakpoint includes itself

#br-page-wrapper
{
    @include container();
    @include at-breakpoint($breakpoint-mobile-portrait)
    {
       @include with-grid-settings($layout-mobile-portrait)
       {
          @include container();
          background: red;
       }
   }
}

The var $layout-mobile-portrait is defined in my constants.scss:

$layout-mobile-portrait: 1 98% 2% 0;

BUT if I replace the variable with the values of the variable I get no error.

Answer 1

Short:

You can do either of two things:

// use commas:
@include with-grid-settings(1, 98%, 2%, 0) { /* content */ }

// use varargs (with "..."):
@include with-grid-settings($layout-mobile-portrait...) { /* content */ }

Long:

container() does call at-breakpoint() any time the columns requested are different from the current setting for $total-columns. Your problem is that you are not passing a valid value to with-grid-settings() because you are using a space-separated list. with-grid-settings() is setting that entire list as the value of $total-columns, which is then passed to container() where it gets parsed as a new layout, no longer equal to your errant $total-columns setting.