Bourbon-Neat:变量$column和$gunch用于不同的断点

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中，您可以定义多个网格，并为每个网格的激活时间选择断点。

请参阅neat/settings_setting.scs-中的官方示例