css - 在 Compass Susy 中组合布局断点？

Question

我只是想使用 Susy

我已经定义了布局，我需要从桌面版本开始，然后再添加 2 个：一个用于平板电脑，一个用于手机：

$total-columns  : 12;
$column-width   : 4em;
$gutter-width   : 1.4em;
$grid-padding   : $gutter-width;

$phone: 4 35em;
$tablet: 35em 8 70em;

似乎正在工作。当我需要对应该出现在桌面上而不是其他两个中的任何内容进行更改时，我的问题就出现了，我发现自己在重复自己：

#my-div {
@include span-columns(3 omega,7);
     @include at-breakpoint($tablet) {
    display:none;
    }
 @include at-breakpoint($phone) {
    display:none;
    }
}

我怎样才能简化这个？

Answer 1

在这种情况下，您不需要 susy，您只需要一个最大宽度为 70em 的基本 CSS 媒体查询。断点的唯一原因是获得媒体查询/布局更改组合。或者，添加 '$small: 8 70em;' 并使用它。