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

你可以做到这一点，但它会有些复杂。虽然一旦完成，你可以通过变量调整它。

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

我会告诉你我对一个假设页边栏的意思。请注意，为了示例，我并没有过多考虑实际设计。如果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相同的范围内声明已更改的变量。 mixin将使用刚刚声明的内容，但变量不会全局更改。

这显然会变得非常复杂和冗长。保持这种状态的技巧将是1）将它们设置为变量，这样你就可以立即改变所有并且你不必记住它们的值。 2）使用布局类。我上面写的所有内容都可以在.l-aside类或甚至是自定义mixin中。与可重复使用的基于组件的SCSS一起，它应该不会那么糟糕。

Answer 2

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

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

Bourbon Neat：变量$ column和$ gutter用于不同的断点

2 个答案: