2

苏西对我来说很陌生。我正在尝试为我的页面设置断点

这是站点文档上的演示代码

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

我不明白的是 30em 和 12 代表什么，我想为页面如此宽时设置一个媒体查询，理想情况下是手机大小。我将如何使用 sussy 进行此操作？

更新

即使在阅读文档后，我也不太了解语法，我尝试过编写，但我得到了一个 sass 错误。我将如何使用 12col 网格在 30em 处书写？

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

1 回答 1

4

您的答案在来源：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-20T02:13:11.287 回答