2017-06-27 12 views
0

レイアウトデザインで2つのブレークポイント、すなわちタブレットとデスクトップの2つの異なるSusyグリッドグローバルコンフィグレーションを使用しようとしています。別のブレークポイントで異なるSusy設定を使用する

これは私の_variables.scssコードです:1200pxの幅を打ったとき、私は$susy-desktop設定を取得するために達成することができますどのように

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

。 mixinは動作しないようです。通常の設定$susyが正常に動作しています。

これ以上の情報が必要な場合は、時間をお教えください。 ;)

答えて

1

susy-breakpoint mixinは、内容を期待するラッパーです。これは、メディアクエリを追加し、それに渡されるすべての設定を変更します:コンテンツに渡さず

susy-breakpointを使用して
@include susy-breakpoint(1200px, $susy-desktop, false) { 
    /* This code will use the $susy-desktop settings at 1200px */ 
    @include span(3); 
} 

は効果がありません。

+0

ご返信ありがとうございます。多くの助けになります! ;) – PabloCarmona

関連する問題