我见过的大多数 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()
的任何东西自动将它们的值调整为新的列宽 without 必须重新声明它们。
所以...
foo { @include span-columns(4, $total-columns); }
不会在断点处更改,但列的宽度会自动更改。
这可能吗?
最佳答案
Susy 2 使用新的 susy-breakpoint 解决了这个问题用more powerful shorthand syntax .但是 Susy 1 方法并没有复杂多少。 at-breakpoint
mixin 是两个操作的简单包装器:
- 设置媒体查询。
- 更改该媒体查询 block 内的全局 Susy 设置。
我建议下载 Breakpoint(或其他类似的插件)来处理媒体查询方面的事情,但您也可以手动完成。 Susy 提供了一个 mixin 来处理第二部分 (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.
}
}
关于css - 在断点处更改 `$column-width`,但不更改列数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24348646/