在不同的断点处使用不同的 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);

当宽度达到 1200px 时，如何才能获得 $susy-desktop 配置。 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不传入内容将没有效果。

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

Use different Susy config at different breakpoints

responsive-design

sass

grid-layout

susy