1

我想将 susy 用于两个嵌套网格。一个定义页面布局（左侧的菜单，右侧的内容）和一个内部content.

原因是内容是由可以使用不同模板的 CMS 创建的，我希望将 scss 代码与模板一起使用。使用流体网格似乎正好解决了这个问题：

<div class="page">
    <div class="menu">
        <ul><li>foo</li><li>bar</li></ul>
    </div>
    <div class="content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</div>

@import "susy";

/* Outer Grid  (Page Layout) */
$total-columns  : 4;
$column-width   : 1024px / $total-columns;
$gutter-width   : 0px;
$grid-padding   : 0px;
.page {
    @include container;
    .menu {
        @include span-columns(1);
    }
    .content {
        @include span-columns(3);
    }
}

/* Inner Grid */
$total-columns  : 1;
$column-width   : 200px;
$gutter-width   : 0px;
$grid-padding   : 0px;
$container-style: fluid;
.page .content {
    @include container;
    .item {
        @include span-columns(1);
    }
    @include at-breakpoint(3) {
        @include container;
        .item {
            @include span-columns(1);
        }
    }
}

我的问题是 $column-width: 200px; 对于内部网格，因为生成的媒体查询使用 min-widht: 600px，尽管此时只有 75% 的宽度可用。

实现这一点的最佳方法是什么？

4

1 回答 1

1

containermixin 在嵌套上下文中没有做任何有用的事情。它设置了最大宽度和自动边距（用于页面居中）——这两者都已经被你的外部容器处理了。

我还建议不要使用 1 列网格。从您最小的有用网格 (3) 开始，在您通过移动断点之前不要使用列。

在 Susy 2.0 中它会变得更加清晰，但列宽和装订线宽度主要用于创建比率 - 所以如果你想根据容器宽度设置它们，你使用的单位并不重要。这可能听起来令人困惑，但这是我将如何实现你想要的：

$total-columns  : 4;
$column-width   : 200px;
$gutter-width   : 0px;
$grid-padding   : 0px;
$container-width: 1024px;

基于这些设置，Susy 创建了 4 个没有装订线的列，从可用的1024px容器宽度中平均分配。由于您设置了$container-width，Susy 使用$column-width和$gutter-width来确定一个比率 - 由于该比率0的一侧是 ，因此另一侧是什么并不重要，只要它是某种东西。这些值的另一个用途是计算断点。我们稍后会看到。现在你可以做你的事情了：

.page {
  @include container;
  .menu {
    @include span-columns(1);
  }
  .content {
    @include span-columns(3 omega);
  }
}

和：

.page .content {
  .item {
    // Elements span the full width by default, so nothing is needed in mobile view.
    @include at-breakpoint($total-columns) {
      @include span-columns(1,3);
      @include nth-omega(3n);
    }
  }
}

外部网格的设置也适用于内部网格。它们实际上并不是不同的网格，只是嵌套在其他元素中的元素。

于 2013-05-30T19:26:38.127 回答