在断点更改`$column-width`‘，但不更改列数

Question

我见过的大多数Susy示例似乎都处理了在给定断点上列数量发生变化的情况，即：

$total-columns: 4;
$large: 12;

// code based on 4 columns

@include at-breakpoint($large) {
    // code based on 12 columns
}

但是，当您希望列数保持不变，但是(例如)只是更改列宽度时，怎么办？如下所示：

$total-columns: 12;
$column-width: 3em;

$large: 64em;
$large-column-width: 3.75em;

@include at-breakpoint($large) {
    $column-width: $large-column-width; // automagically changes previously declared column-widths.
}

我希望在断点之前使用columns()或span-columns()来自动调整它们的值以适应新的列宽，而不必重新声明它们。

所以..。

foo { @include span-columns(4, $total-columns); }

不会在断点更改，但列的宽度会自动更改。

这个是可能的吗？

Answer 1

Susy 2使用带有苏西-断点的新更强大的速记语法解决了这个问题。但是Susy 1的方法并不复杂。at-breakpoint混联器是一个简单的包装器，用于两个操作：

1. 设置媒体查询。
2. 更改媒体查询块内的全局Susy设置。

我建议下载断点(或其他类似的插件)来处理媒体查询方面的事情，但你也可以手工完成。Susy提供了一个混合器来处理第二部分(with-grid-settings)。如果将这两者结合在一起，您就有了一个更强大的at-breakpoint版本。

$large: 64em;
$large-column-width: 3.75em;

@media (min-width: $large) {
  @include with-grid-settings($column-width: $large-column-width) {
    // new column-width applied to code in here.
  }
}