在不同的断点处使用不同的Susy配置

Question

我想在我的布局设计中使用两个不同的Susy网格全局配置用于两个断点：平板电脑和桌面。

这是我的_variables.scss代码：

// Susy Sass Grid System Config 
$susy: (
    columns: 12, 
    column-width: 45px, 
    global-box-sizing: border-box, 
    gutters: 18px/45px, 
    gutter-position: inside, 
    math: static, 
    output: float, 
); 

$susy-desktop: (
    columns: 12, 
    column-width: 67px, 
    global-box-sizing: border-box, 
    gutters: 30px/67px, 
    gutter-position: inside, 
    math: static, 
    output: float, 
); 

@include susy-breakpoint(1200px, $susy-desktop, false); 

我如何能实现获得$susy-desktop配置创下1200像素的宽度时。 mixin似乎不起作用。正常配置$susy工作正常。

如果需要更多的信息，请告诉我，谢谢你的时间！ ;）

Answer 1

susy-breakpoint mixin是一个需要内容的包装。这将增加一个媒体查询，并更改设置传给它一切：

@include susy-breakpoint(1200px, $susy-desktop, false) { 
    /* This code will use the $susy-desktop settings at 1200px */ 
    @include span(3); 
} 

使用susy-breakpoint没有内容传递不会有任何效果。