Question

我正准备使用Susy

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

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

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

似乎有效。当我需要对桌面上应该出现的内容进行更改时，我的问题就会出现，而不是出现在其他2中，我发现自己在重复自己：

#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媒体查询。 at-breakpoint的唯一原因是获得媒体查询/布局更改组合。另外，添加'$ small：8 70em;'并使用它。

在Compass Susy中组合布局断点？

1 个答案: