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

Question

我试图解决亚像素舍入错误很长一段时间了，但到目前为止，我一次又一次失败了。我试图在Sass和Susy的帮助下完成这项工作。我在我的最后一次尝试，我从Github上超对称问题跟踪习惯的混入（我用的空间，立柱以及推动在保证金左/右键属性类似建议有）：

@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）等）。对于大于12的值，最后在for循环中将值重置为2。然后，我为每一个李遍历30个图像列。每次调用迭代隔离mixin。在for循环之后，我添加了@include nth-omega（6n）;在每个第六元素之后得到一条新线。

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

Answer 1

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

你很近，但数学不太对。为了保持一切正常，所以我写了一个mixin来为你处理它。

@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，宽度&方面：以便它使用现有与Susy $from-direction可变我还调整了分离混入。这就是它的全部：

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

这应该适用于任何宽度，在任何情况下，任何数量的列表项。干杯!