css - Susy : Omega and Responsive Grids

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

如果没有，是否有其他网格系统可以提供？

最佳答案

用Susy解决您的问题

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

但是，覆盖上下文的最佳方法是使用at-breakpoint mixin:

// 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。

要使用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); } }

少用欧米茄方法的概述

有些SASS网格系统不使用“omega”参数(不要与Drupal的Omega主题混淆)，而必须将其应用于每行的最后一项。而是提供每个元素的位置(元素开始于哪一列)以及其列宽。

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

Susy的isolate和isolate-grid mixins也支持此方法。

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