Susy：Omega和响应式网格

Question

Susy：Omega和响应式网格

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

如果不行，是否有其他网格系统提供此功能？

- Sacha

请注意，这个问题与Drupal Omega主题无关，如果标题有误导之嫌，请见谅。 - Sacha

2个回答

1

在您的情况下，您需要重新定义新断点中的列的总数（上下文）。至于nth-omega，您可以使用@include remove-nth-omega(3n)来忽略第一次调用，然后显式调用第二次，但我认为这是一种CSS代码味道（必须中和属性），因此我建议使用媒体查询拆分来避免这种情况。另外，我不知道有任何框架可以自动为您执行此操作。

- Reda Lemeden

如果您不介意一些覆盖代码，那么remove-nth-omega(3n)是完成此任务的正确工具。否则，@Kaishin是正确的，您可以使用更具体的（最小值+最大值）媒体查询来消除任何需要覆盖的需求。 - Miriam Suzanne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrey Mikhaylov - lolmaus · Accepted Answer

使用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分层方法，只需在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主题混淆），这个参数必须应用于每行中的最后一个项目。相反，您需要提供每个元素的位置（该项从哪一列开始）以及其列宽。

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

Susy也支持此方法，具有其isolate和isolate-gridmixins。

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