UPD 2014-07-21

在这个屏幕上可以看到我需要的东西：

我不需要另一种填充样式，我需要删除每行中第一个和最后一个项目的填充。这不能通过css完成，因为sass计算是错误的。

UPD 2014-07-30

基于各种来源，我设法建立了这个混合：

@mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){

  @include layout($layout, $gutter: $thegutter) {

  @for $i from 1 through $cols {
    @if $i == 1 {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, left);
      }
    }
    @else if $i < $cols {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, none);
      }
    }
    @else {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, right);
      }
    }
   }
  }
}

可以被称为例如通过：

$layout: 1 1 1;
@include thegrid($layout, 3, $el: ".item");

这里可以看到一个例子：http://sassmeister.com/gist/7a45960747ad3d4bbf56

Answer 1

不确定你的意思。

您正在应用具有绝对值的装订线。这就是Singularity所说的固定水槽。

Singularity通过对网格元素应用填充来实现固定的装订线。

填充可以应用于两种样式：

split：装订线尺寸除以2，结果值将作为左右填充应用于每个网格项目。
opposite：除了占据最后一列的项目之外，天沟大小的值将作为右边距应用于每个项目。

因此，如果您对拆分排水沟不满意，请切换到相反的排水沟。这是默认行为，因此您只需注释掉@include add-gutter-style('split');。

如果您对排水沟风格不满意，那么您可以手动删除不需要的填充。这并没有多大意义，因为如果将零填充应用于除占用第一列和最后一列之外的项目，则会扭曲网格。如果仅将它们应用于占据第一列和最后一列的项目，则基本上可以获得与opposite装订线样式相同的设置。

如果您制作所需布局的铅笔画，您可能会得到更好的帮助。

UPD 2014-07-21

好的，现在它清楚你的意思了。

所以你基本上想要外层的分水槽和内层的相对的水槽。您已经使用覆盖网格设置所需的layout() mixin，因此您可以告诉它覆盖装订线样式，例如： G：

@mixin layout(2, $gutter-style: 'opposite') {

不幸的是，由于Singularity通过填充创建了固定的排水沟，因此它们只能在分割模式下发挥出色。在相反的模式下，固定排水沟会产生不均匀的柱子。

所以你必须使用相对的排水沟：

@mixin layout(2, 0.1, $gutter-style: 'opposite') {

您必须记住以下几点：

分别跨越每行中的最后一项。

使用相反的装订线样式，每行中的最后一项是特殊的：它不包含正确的装订线。所以你必须告诉Singularity哪一项是最后一行。

为此，我们将使用:nth-child(Xn + Y)选择器，其中X是行中的项目数，Y是行中目标项的数量。在我们定位最后一项时，X和Y将是平等的：
```
@include float-span(1);

&:nth-child(4n + 4) {
  @include float-span(1, last);
}
```
隔离媒体查询。

一旦为每个断点执行此操作，您将最终使用应用于不同断点中不同项的样式。这些样式不会被覆盖，因此会从较小的断点泄漏到较大的断点，从而打破布局。

你可以手动覆盖它们，但那是一项不值钱的工作。相反，请隔离您的媒体查询，以便样式不会泄露：
```
$beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint:       800px;

// Mobile view (formerly without a media query)
@include breakpoint($beforeMediumBreakpoint) {
```

演示：http://sassmeister.com/gist/dd9f1af025900d7e63db

PS 我的一条建议：不要使用固定排水沟和拆分模式。使用流体排水沟和默认的反向模式。这样可以省去很多麻烦！您始终可以通过将填充应用于最外面的容器来模拟分割水槽。

你可以做一些数学计算容器的相对填充，它将等于网格项之间的装订线！借助数学的神奇之处，您甚至可以将底部边距应用于等于网格装订线的网格项目，从而生成漂亮的统一缩略图网格。

我创建了一个漂亮的扩展程序Singularity Quick Spanner，可以减少设置缩略图网格所需的工作量。 See it in action（注意垂直排水沟等于水平排水沟）。

删除缩略图网格中的填充

UPD 2014-07-21

UPD 2014-07-30

1 个答案:

UPD 2014-07-21