-1

我还没有通过 Singularity 完成一件事。目前，我尝试从浮动切换到隔离输出样式并使用网格和隔离跨度。但是有一种模式我无法重现。不确定是否有更优雅的方式。对于浮点输出，到目前为止我使用了以下设置，例如

<div class="floater">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'float';

.floater div
{
  background-color:red;
  height:10em;
  @include float-span(4);
  &:nth-child(4n) {
      @include float-span(4, 'last');
  }
}

导致 4 个盒子，宽度相同，彼此相邻对齐。但是如何通过隔离跨度/隔离输出来实现相同的目标。如果我尝试

<div class="isolator">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'isolation';

.isolator div
{
  background-blue;
  height:10em;
  @include isolation-span(4, 1, 'right', $gutter: .25);
  &:nth-child(4n) {
        @include isolation-span(4, 13, 'right', $gutter: .25);
  }
}

我是否必须为每个“列”写一个第 n 个孩子和一个隔离跨度包括（因为浮动示例中的第 n 个孩子只显示了第一个和最后一个框）？或者有没有像上面的浮动示例那样更短的方法？最好的问候拉尔夫

4

1 回答 1

1

您需要写出每个项目。输出方法谨慎地将isolation项目放置到网格上的列位置。从技术上讲，你对float输出方法所做的实际上是快乐奇点的副产品，它发生在组合float和symmetric网格中，如果你改变其中任何一个变量，它就会改变。

这里发生的情况是，对称网格恰好发生这种情况，因为每个项目的宽度相同，您可以将一列交换为另一列。使用float，碰巧您放置的每一列都与左侧的项目对接（对于ltr）。这两个属性结合起来允许您定义一个总是span从float第一列开始，但让它显示在任何位置，因为您可以在对称网格中交换列。然后，您可以利用它将它们堆叠在一起。这种行为实际上是float输出风格的心智模型和isolation输出风格的心智模型之间的核心区别（如上所述，它谨慎地将项目放置到列位置）。

于 2014-02-17T12:56:30.083 回答