6

使用 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自然落在正确的位置？

如果没有，是否有任何其他网格系统提供该功能？

4

2 回答 2

11

用 Susy 解决您的问题

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

但是覆盖上下文的最好方法是使用at-breakpointmixin： 

// 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 假设分层响应：移动样式适用于所有宽度；中等样式适用于中等和大宽度，大样式适用于大宽度。

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

at-breakpoint要使用 Omega 分层方法，只需删除调用中的第三个元素（最大宽度） 。但是你必须申请@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 主题混淆），该参数必须应用于每行中的最后一项。相反，除了列宽之外，您还需要提供每个元素的位置（项目从哪一列开始）。

为了实现这一点，使用了另一种 CSS 定位方法，称为“隔离”。使用这种方法的第一个框架是Zen Grids。

isolateSusy 也通过它的和isolate-grid mixins支持这种方法。

如果不提及最新和最先进的 SASS 网格框架Singularity ，本概述将是不完整的。它支持两种定位方法，并且可以扩展以在未来支持更多（例如最近添加到 Compass中的flexbox ）。

于 2013-04-08T06:57:00.697 回答
1

在您的情况下，您将不得不重新定义新断点中的总列数（上下文）。至于nth-omega，您可以@include remove-nth-omega(3n)在显式调用第二个调用之前否定第一个调用，但我认为 CSS 代码有异味（必须中和属性），因此我建议使用媒体查询拆分来避免这种情况。

另外，我不知道有任何框架可以自动为您做到这一点。

于 2013-04-08T01:47:47.223 回答