1

我尝试消除亚像素舍入误差已经有一段时间了，但到目前为止，我一次又一次地惨败。我试图在 Sass 和 Susy 的帮助下完成这项工作。我在上一次尝试中使用的 mixin 是从 Github 上的 Susy 问题跟踪器获得的（我使用了空间、列以及按那里建议的 margin-left/right 属性）：

@mixin isolate($location, $context: $columns, $dir: 'ltr') {
  @if $dir == 'ltr' {
    margin-right: -100%;
    margin-left: space($location, $context);
  }
  @else if $dir == 'rtl' {
    margin-left: -100%;
    margin-right: space($location, $context);
  }
}

我的 Scss 如下所示：

.imggrid{
    @include with-grid-settings($gutter: 0.1%){
        $y:2;
        li{
            @include span-columns(2,12);    
            @for $x from 1 through 30
            {
                &:nth-child(#{$x}){
                    @include isolate($y,12);
                    $y: $y + 2;
                    @if $y > 12{
                       $y: 2;
                    }
                }
            }
            @include nth-omega(6n);
        }
    }
}

首先，我为图像网格创建了一个自定义装订线。然后我定义了一个变量 y 以在两个步骤中进行迭代，以便能够调用隔离 mixin（isolate(2,12) 隔离 (4,12) 等）。对于大于 12 的值，该值最终在 for 循环中重置为 2。然后我为每 li 遍历 30 张图像跨越一列。每次调用迭代的isolate mixin。在 for 循环之后，我附加了 @include nth-omega(6n); 在每个第六个元素之后获得一个新行。

但不知何故，它根本不起作用。前四行缺少第一个图像，最后一行缺少前五个元素。任何想法和建议表示赞赏。谢谢拉尔夫

4

1 回答 1

5

更新：我将这些 mixins 调整为 1 索引而不是 0 索引。我认为这是更常见的。

你很接近，但数学并不完全正确。保持一切正常有点复杂，所以我写了一个 mixin 来为你处理它。我还调整了隔离 mixin，以便它使用现有的 Susy$from-direction变量：

@mixin isolate($location, $context: $total-columns, $from: $from-direction) {
  $to: opposite-position($from);
  margin-#{$to}: -100%;
  margin-#{$from}: space($location - 1, $context);
}

@mixin isolate-list($columns, $context: $total-columns, $from: $from-direction) {
  $position: 1;
  $line: floor($context / $columns);

  @include span-columns($columns, $context, $from: $from);

  @for $item from 1 through $line {
    $nth: '#{$line}n + #{$item}';
    &:nth-child(#{$nth}) {
      @include isolate($position, $context, $from);
      @if $position == 1 { clear: $from; }

      $position: $position + $columns;
      @if $position > $context { $position: 1; }
    }
  }
}

像span-columns, width & context 一样使用它。仅此而已：

.imggrid{
  li{
    @include isolate-list(4,12);
  }
}

这应该适用于任何宽度、任何上下文、任何数量的列表项。干杯!

于 2013-03-13T07:47:07.260 回答