Grid Bourbon Neat：不同断点的变量$column和$gotter

我需要为不同的断点设置不同的列和边沟宽度，但这在

\u grid-settings.scss

@media screen and (max-width: 539px) {
    $column: percent(100/4);
    $gutter: em(13);
}
@media screen and (min-width: 540px) {
    $column: percent(100/12);
    $gutter: em(13);
}
@media screen and (min-width: 960px) {
    $column: percent(100/12);
    $gutter: em(20);
}

---

我是在要求Neat做一些它做不到的事情吗？

你可以这样做，但这会有点复杂。虽然完成后，可以通过变量对其进行调整

首先，用变量替换所有这些值，这些变量只保留一次。这是因为您将多次引用它们。诀窍，以及您决定不这样做的原因，是您必须在每个规则中声明新的值

我将用一个假设的页面边栏向您展示我的意思。注意，为了这个例子，我并没有认真考虑实际的设计。如果

span columns

同时使用这两个变量，我想不起来了，但我们假设这个例子也是这样。不要分心

在

\u variables.scss

中：

$bp-small: 540px;
$bp-large: 960px;

$column-sm: percent(100/4);
$column-lg: percent(100/12);
$gutter-sm: em(13);
$gutter-lg: em(20);

$column: $column-sm;
$gutter: $gutter-sm;

您可以不声明最小的变化（例如，

$column sm

），但我喜欢这样做，以使我的意图超级清晰

在你的部分：

body > aside {
  // Don't need the first media query declared since we're using mobile-first.
  @include span-columns(2 of 2);

  @media screen and (min-width: $bp-small) {
    $column: $column-lg;
    // Don't need to declare the $gutter since it's the same.

    @include span-columns(3 of 12);
  }

  @media screen and (min-width: $bp-large) {
    $column: $column-lg;
    $gutter: $gutter-lg;

    @include span-columns(4 of 12);
  }
}

因此，本质上，您必须在与使用它们的mixin相同的范围内声明更改的变量。mixin将使用刚刚声明的内容，但变量不会全局更改

---

这显然会变得非常复杂和冗长。保持低调的诀窍是：1）将它们设置为变量，这样你就可以一次更改所有内容，而不必记住它们的值。2）使用布局类。我上面写的所有东西都可以放在像

.l-aside

这样的类中，甚至可以放在定制的mixin中。与可重用的、基于组件的SCS一起，它应该不会那么糟糕。

在Neat 2.0中，您可以定义多个网格，并为每个网格的激活时间选择断点

---

请参见部分中的

，变量$column和$gotter得到一个值，但它们似乎没有被使用。@Halfacht已经有一段时间了，但我记得

span columns

在内部使用这些变量。因此，我仅在断点更改时才覆盖这些。至少在发帖时是这样。