css - 苏西 : Omega and Responsive Grids

Question

使用 Susy 时，您可以在行的最后一项上放置一个“omega”标志以移除其 margin-right。例如，假设我们有一堆元素需要布置在一个 12 列的网格上:

<div class="item">...</div>
<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>

还有 SCSS:

.item{
  @include span-columns(4);
  @include nth-omega(3n);
}

但我们的网格是响应式的，较小的显示器使用 8 列网格。问题是 omega 现在需要出现在 2n 上，而不是 3n:

<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>
<div class="item">...</div>

所以我的问题是:使用 Susy，您是否需要为每个断点重新定义您的列，或者是否有某种方法可以一劳永逸地定义列宽并让 omega 自然落在对的地方？

如果没有，还有其他网格系统提供吗？

Answer 1

解决您与 Susy 的问题

Susy 允许覆盖列数。许多 Susy mixin 允许这样做——每个接受 $context 参数的 mixin。

但覆盖上下文的最佳方法是使用 at-breakpoint 混合宏:

// Defining the breakpoints
$mobile-to-medium: 400px;
$medium-to-large:  800px;

// Defining columns
$columns-small:    1;
$columns-medium:   8;
$columns-large:    12;

// Starting with a one-column mobile grid
$total-columns: $columns-small;

// Global styles go here

// Mobile-only styles
@include at-breakpoint($total-columns $mobile-to-medium) {
  // ...
}

// Medium-only styles go here
@include at-breakpoint($mobile-to-medium $columns-medium $medium-to-large) {

  .item{
    @include span-columns(3);
    @include nth-omega(2n); } }

// Large-only styles go here
@include at-breakpoint($medium-to-large $columns-large) {

  .item{
    @include span-columns(4);
    @include nth-omega(3n); } }

Omega 假设分层响应:移动样式应用于所有宽度； medium样式适用于中大宽度，large样式适用于大宽度。

上面的方法不是分层的:移动样式只应用于移动宽度等。这样你就不必担心 omega 应用到了不应该去的地方。

要使用 Omega 分层方法，只需删除 at-breakpoint 调用中的第三个元素(最大宽度)。但是你必须应用 @include remove-nth-omega():

// Defining the breakpoints
$mobile-to-medium: 400px;
$medium-to-large:  800px;

// Defining columns
$columns-small:    1;
$columns-medium:   8;
$columns-large:    12;

// Starting with a one-column mobile grid
$total-columns: $columns-small;

// Global styles go here

// Medium and large styles go here
@include at-breakpoint($mobile-to-medium $columns-medium) {

  .item{
    @include span-columns(3);
    @include nth-omega(2n); } }

// Large-only styles go here
@include at-breakpoint($medium-to-large $columns-large) {

  .item{
    @include span-columns(4);
    @include remove-nth-omega(2n);
    @include nth-omega(3n); } }

无 omega 方法概述

有些 SASS 网格系统不使用“omega”参数(不要与 Drupal 的 Omega 主题混淆)，而“omega”参数必须应用于每一行的最后一项。相反，除了列宽之外，您还需要提供每个元素的位置(元素从哪一列开始)。

为了使之成为可能，另一个 CSS 定位 approach被使用，称为“隔离”。第一个使用这种方法的框架是 Zen Grids .

Susy 还通过其 isolate 和 isolate-grid 支持此方法 mixins .

如果不提及 Singularity，此概述将是不完整的，最新最先进的SASS网格框架。它支持两种定位方法，并且可以扩展以在将来支持更多(例如 flexbox，最近已成为 Compass 的 added)。