使用 susy 和断点与 grunt-sass

Question

我正在开发一个新项目并开始使用 grunt-sass 而不是 grunt-contrib-sass，因为它的速度要快得多。我还删除了指南针。现在的问题是我再也找不到添加“susy”网格和“断点”的方法了。我曾经把它放在一个 config.rb 文件中，但我不再使用它了，因为我没有使用指南针。

所以我在我的项目中添加了所有的 susy 风格，效果很好，但这不是我喜欢的方法。但是找不到添加断点的方法。

有没有办法添加这些？还是我必须为此使用指南针？

对不起，我的英语不好，不是很好。

Answer 1

不需要 Compass，有一个新的 susy-media 断点 Mixin 旨在与 LibSass 一起使用，这实际上是您通过 grunt-sass 使用的。这就是我使用的，效果很好。因此，您可以在 _vars.scss 部分中定义一些 Susy 网格变量和断点，例如：

// Define susy.
$susy: (
    columns: 12,
    gutters: .8,
);

// Define some breakpoints.
$bp-narrow: 30em;  // 480px
$bp-med: 48em; // 768px

现在将它们放在一起，例如在 _layout.scss 中：

// the breakpoint (media query)
@include susy-media($bp-med) {
  // now a grid 
  .l-foobar-wrap {
    .foo {
      @include span(7)
    }
    .bar {
      @include span(5 at 8)
    }
  }
}

如需了解更多信息，read the susy docs，一切尽在您的掌握之中，并且适用于 grunt-sass (LibSass)。这是我日常工作流程的一部分。

注意，作为非常好的媒体查询渲染和视网膜工作流程的替代方案，我现在使用Include Media 而不是susy-media，它也适用于 LibSass。