Question

我试着解决亚像素舍入误差已经有一段时间了，但到目前为止，我一次又一次地失败了。我试图在Sass和Susy的帮助下完成这项努力。我在上次尝试中使用的mixin来自Github上的Susy问题跟踪器（我已经使用了空格，列以及按照左边/右边的属性推送那里）：

@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，以两个步骤迭代，以便能够调用isolate mixin（isolate（2,12）isolate（4,12）etc）。对于大于12的值，该值在最后的for循环中重置为2。然后我跨越一列，每个李走过30张图像。每次调用迭代隔离mixin。在for循环后，我添加了@include nth-omega（6n）;在每个第六个元素之后获得一个新行。

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

Answer 1

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

你很接近，但数学不太合适。保持一切顺利是有点复杂的，所以我写了一个mixin为你照顾它。我还调整了isolate 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，宽度＆amp;上下文。这就是全部：

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

对于任意数量的列表项，它应该在任何上下文中适用于任何宽度。干杯！

如何解决和补偿子像素舍入问题？

1 个答案: