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配置

1 个答案: