如何解決和補償子像素舍入問題？

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); 
    } 
} 

這應該適用於任何寬度，在任何情況下，任何數量的列表項。乾杯!