在grunt-sass中使用susy和breakpoint

Question

我正在開發一個新項目，並開始使用grunt-sass而不是grunt-contrib-sass，因爲它的速度更快。我也刪除了指南針。現在的事情是，我無法找到一種方法來添加'susy'網格和'斷點'了。我曾經把它放在一個config.rb文件中，但我不再使用它，因爲我沒有使用指南針。

所以我在我的項目中添加了所有susy風格，那些工作正常，但它不是我的首選方法。但不能找到添加斷點的方法。

有沒有辦法添加這些？或者我必須爲此使用指南針？

對不起，我的英語不好，不是很擅長。

Answer 1

不需要指南針，有一個新的susy-media斷點Mixin設計用於與LibSass一起使用，這是您通過grunt-sass實質上使用的。這就是我使用的，它很棒。所以，你會定義一些與Susy電網變量和斷點在_vars.scss部分，例如：

// 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) 
    } 
    } 
} 

更多info，read the susy docs，這一切都在你身邊，這與grunt-sass（LibSass）一起工作。這是我日常工作流程的一部分。

請注意，作爲非常好的媒體查詢渲染和視網膜工作流程的替代品，我現在使用Include Media而不是susy-media，它也可以在LibSass下正常工作。