短：

Question

我只想在特殊的断点处应用另一个网格布局（也许我做错了蚂蚁，这就是我的问题的原因......）

如果我尝试以下代码，我会发现错误：

找到@include循环：at-breakpoint包含自身

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

var $ layout-mobile-portrait在我的constants.scss中定义：

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

但是如果我用变量的值替换变量我没有错误。

Answer 1

短：

你可以做以下两件事之一：

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

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

长：

每当请求的列与container()的当前设置不同时，

at-breakpoint()会调用$total-columns。您的问题是您没有将有效值传递给with-grid-settings()，因为您使用的是以空格分隔的列表。 with-grid-settings()将整个列表设置为$total-columns的值，然后将其传递到container()，在此处将其解析为新布局，不再等于您的错误$total-columns设置。

at-breakpoint，with-grid-settings无限循环

1 个答案:

短：

长：