Sass 带断点的嵌套网格

我想对两个嵌套网格使用susy。一个定义页面布局（菜单在左边，内容在右边）和一个在

内容

内

原因是内容是由CMS创建的，在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);
        }
    }
}

foo
bar

1.
2.
3.
4.
@输入“susy”；
/*外部网格（页面布局）*/
$共列：4列；
$column width:1024px/$total columns；
$排水沟宽度：0px；
$grid padding:0px；
.第页{
@包括集装箱；
.菜单{
@包括跨柱（1）；
}
.内容{
@包括跨柱（3）；
}
}
/*内网格*/
$columns总数：1；
$列宽：200px；
$排水沟宽度：0px；
$grid padding:0px；
$container样式：流体；
.第页.内容{
@包括集装箱；
.项目{
@包括跨柱（1）；
}
@包含在断点处（3）{
@包括集装箱；
.项目{
@包括跨柱（1）；
}
}
}

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

---

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

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

我还建议不要使用单柱轴网。从最小的有用网格（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

和

$gotter width

来确定一个比率-并且由于该比率的一侧是

0

，所以只要它是某个值，另一侧是什么并不重要。这些值的另一个用途是计算断点。我们稍后再看。现在你可以做你的事情了：

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

以及：

---

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

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

我还建议不要使用单柱轴网。从最小的有用网格（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

和

$gotter width

来确定一个比率-并且由于该比率的一侧是

0

，所以只要它是某个值，另一侧是什么并不重要。这些值的另一个用途是计算断点。我们稍后再看。现在你可以做你的事情了：

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

以及：

---

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

您实际上想要实现什么？顺便说一句，您不需要在嵌套上下文中使用Susy的

容器

mixin。但在这种情况下，我甚至不确定单列网格的意义是什么。外部网格和内部网格在不同的文件中定义，内部网格不知道外部网格。我认为使用两个嵌套网格（包括自己的容器）是有意义的。1列（移动优先）网格使用断点获得3列网格。您实际想要实现什么？顺便说一句，您不需要在嵌套上下文中使用Susy的

容器

mixin。但在这种情况下，我甚至不确定单列网格的意义是什么。外部网格和内部网格在不同的文件中定义，内部网格不知道外部网格。我认为使用两个嵌套网格（包括自己的容器）是有意义的。1列（移动优先）网格使用断点获得3列网格。