Question

我想将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％的宽度可用。

实施此方法的最佳方式是什么？

Answer 1

container mixin在嵌套上下文中没有任何用处。它设置了最大宽度和自动边距（用于页面居中） - 两者都已由外部容器处理。

我还建议不要使用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);
    }
  }
}

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

带断点的嵌套网格

1 个答案: