Susy:Omega和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 mixins允许 - 每个接受$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假设分层响应:移动样式适用于所有宽度; 中等样式适用于中等和大的宽度,大样式适用于大宽度.

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

要使用Omega分层方法,只需删除at-breakpoint调用中的第三个元素(max-width).但是你必须申请@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); } }

无欧姆方法的概述

有SASS网格系统不使用"omega"参数(不要与Drupal的Omega主题混淆),这是必须应用于每行的最后一项.相反,除了列宽之外,还提供每个元素的位置(项目从哪一列开始).

为了实现这一点,使用了另一种CSS定位方法,称为"隔离".使用这种方法的第一个框架是Zen Grids.

Susy也用它isolate和isolate-grid mixins支持这种方法.

如果不提及最新和最先进的SASS网格框架Singularity,这个概述将是不完整的.它支持两种定位方法,并且可以扩展以支持将来更多(例如最近添加到Compass的flexbox).