CODEWITHSUNDEEP
csssasscompass-sasssusy-compass
rkoller
rkoller

Reputation: 1474

How to solve and compensate the sub-pixel rounding issue?

I try to iron out the sub-pixel rounding error for quite a while now, but so far i've failed miserably again and again. I try to accomplish that endeavour with the help of Sass and Susy. The mixin i've used in my last try i got from the Susy issue tracker on Github (i've used space, columns as well as push on the margin-left/right property like suggested there): 

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

My Scss looks like the following:

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

First i've created a custom gutter for the image grid. Then i've defined a variable y to iterate up in the steps of two to be able to call the isolate mixin (isolate(2,12) isolate (4,12) etc). For values larger than 12 the value gets reset to two within the for loop in the end. Then i span a column for each li walking through the 30 images. Each time calling the iterating isolate mixin. After the for loop i've appended the @include nth-omega(6n); to get a new line after each sixth element.

But somehow it doesn't work at all. The first four rows are missing the first image and on the last row the first five elements are missing. Any ideas and suggestions are appreciated. Thanks Ralf

Upvotes: 1

Views: 639

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

UPDATE: I adjusted these mixins to be 1-indexed rather than 0-indexed. I think that is the more common.

You're close, but the math isn't quite right. It get's a bit complex to keep everything straight, so I wrote up a mixin to take care of it for you. I also adjusted the isolate mixin so that it uses the existing Susy $from-direction variable:

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

Use it just like span-columns, width & context. That's all there is too it:

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

That should work with any width, in any context, for any number of list items. Cheers!

Upvotes: 5

Related Questions