整洁的波旁酒:不同断点的变量$column和$gutter

Question

对于不同的断点，我需要不同的列和间距宽度，但这在_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做它做不到的事情吗？

Answer 1

您可以做到这一点，但它将会有点复杂。不过，一旦你完成了，你可以通过变量来调整它。

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

我将用一个假想的页面侧边栏向您展示我的意思。请注意，为了这个例子，我并没有过多地考虑实际的设计。我想不起来span-columns是否同时使用了这两个变量，但让我们假设这个示例也使用了这两个变量。不要分心。

在_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将使用刚刚声明的内容，但变量不会被全局更改。

这显然会变得非常复杂和冗长。保持这一点的诀窍是: 1)将它们设置为变量，这样您就可以一次更改所有变量，而不必记住它们的值。2)使用布局类。我在上面写的所有内容都可以放在像.l-aside这样的类中，甚至可以放在自定义的mixin中。再加上可重用的、基于组件的SCSS，它应该不会那么糟糕。

Answer 2

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

请参阅official example in neat/settings/_setting.scss