使用susy和断点与咕哝的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)
    }
  }
}

欲了解更多信息，请阅读susy文档，一切都在那里，这适用于grunt sass（LibSass）。这是我日常工作流程的一部分。

注意，作为一种非常好的媒体查询渲染和retina工作流的替代方案，我现在使用Include media而不是susy-media，它也可以很好地与LibSass配合使用。