我剛剛開始使用susy電網，並試圖找出響應部分

Susy對我來說是新生事物。我想設置斷點我的網頁我剛剛開始使用susy電網，並試圖找出響應部分

這是在網站上的文檔的演示代碼

// at-breakpoint(<$media-layout> [, <$font-size>]) { <@content> } 
@include at-breakpoint(30em 12) { 
    .page { @include container; } 
}

什麼我不明白是什麼30em和12個代表，我想設置爲當一個媒體查詢該頁面是如此之寬，理想的手機尺寸開始和。我怎麼會用sussy去做這件事？

UPDATE

我不太明白的語法，甚至閱讀文檔後，我曾嘗試寫作，但我得到一個錯誤SASS。我如何在30em使用12col網格書寫？

@mixin at-breakpoint($media-layout: 30em 12, $base-font-size){ 
    #mastHead{background: red;} 
}

來源

2013-01-20 Cool Guy Yo

你在做什麼有正確的（雖然沒有必要字體大小參數或參數名稱）。 @cimmanon的回答也是正確的。你遇到了什麼錯誤？ **編輯：**您需要將'@ mixin'更改爲'@ include'。 –

你會得到什麼錯誤？根據文檔，$ media-layout的值看起來是正確的。 – cimmanon

你的回答是源：https://github.com/ericam/susy/blob/master/sass/susy/_media.scss#L23

// Nest a block of code inside a new media-query and layout context. 
// 
// $media-layout : a list of values [$min $layout $max $ie] including... 
//    : - one unitless number (columns in a layout) 
//    : - two optional lengths (min and max-width media-query breakpoints). 
//    : - one optional boolean or string to trigger fallback support for IE. 
// $font-size  : [optional] The base font-size of your layout, if you are using ems. 
//    : - defaults to $base-font-size 
@mixin at-breakpoint(
    $media-layout, 
    $font-size: $base-font-size 
) { 
    // stuff 
}

這也是文檔中：http://susy.oddbird.net/guides/reference/#ref-media-layouts

// $media-layout: <min-width> <layout> <max-width> <ie-fallback>; 
// - You must supply either <min-width> or <layout>. 
$media-layout: 12;   // Use 12-col layout at matching min-width. 
$media-layout: 30em;  // At min 30em, use closest fitting layout. 
$media-layout: 30em 12;  // At min 30em, use 12-col layout. 
$media-layout: 12 60em;  // Use 12 cols up to max 60em. 
$media-layout: 30em 60em; // Between min 30em & max 60em, use closest layout. 
$media-layout: 30em 12 60em;// Use 12 cols between min 30em & max 60em. 
$media-layout: 60em 12 30em;// Same. Larger length will always be max-width. 
$media-layout : 12 lt-ie9; // Output is included under `.lt-ie9` class, 
          // for use with IE conditional comments 
          // on the <html> tag.

來源

2013-01-20 02:13:11 cimmanon

我已添加更新以嘗試澄清我不瞭解的內容。謝謝！ –

我剛剛開始使用susy電網，並試圖找出響應部分

回答

相關問題