2

请看这个要点： http ://sassmeister.com/gist/6d575ec85663865fa567

在那里你可以看到一个 placehold.it 缩略图网格，通过float-span 我现在需要的是：

  • 每行中第一个 .item 的 padding-left 应为 0

  • 每行中最后一个 .item 的 padding-right 应为 0

然后，这将在缩略图网格中结束，与其余内容（例如 lorem ipsum 文本）完全对齐

用singularitygs实现这一目标的野兽方法是什么？

更新 2014-07-21

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

演示

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

更新 2014-07-30

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

@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

4

1 回答 1

2

不明白你的意思。

您正在应用具有绝对值的排水沟。这就是 Singularity 所说的固定排水沟。

Singularity 通过对网格元素应用填充来实现固定排水沟。

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

  • split：gutter 大小除以 2，结果值作为左右填充应用于每个网格项。
  • opposite: gutter size 的值作为右填充应用于每个项目，除了占据最后一列的项目。

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

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

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

更新 2014-07-21

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

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

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

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

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

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

您必须记住以下几点：

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

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

    为此，我们将使用:nth-child(Xn + Y)选择器，其中X是行中的项目数，是行Y中目标项目的数量。因为我们的目标是最后一项，X并且Y将是相等的：

    @include float-span(1);

&:nth-child(4n + 4) {
  @include float-span(1, last);
}

  2. 隔离媒体查询。

    一旦你对每个断点都这样做了，你最终会得到应用于不同断点中不同项目的样式。这些样式不会被覆盖，因此会从较小的断点泄漏到较大的断点，从而破坏布局。

    您可以手动覆盖它们，但这是一项吃力不讨好的工作。相反，隔离您的媒体查询，以便样式不会泄漏：

    $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，它可以减少设置缩略图网格所需的工作量。查看它的实际效果（注意垂直排水沟等于水平排水沟）。

于 2014-07-19T12:25:41.900 回答