Preventing subpixel rounding errors

Fractional pixel values may cause rounding issues in older browsers. This recipe shows you how Susy can prevent you from these rounding errors.

Getting ready

Install Susy, as described in the Installing and configuring Susy recipe of this chapter. Of course, you will also need the Ruby Sass compiler, so read the Installing Compass recipe of Chapter 1, Getting Started with Sass.

How to do it...

After performing the steps beneath you should understand how to prevent subpixel rounding errors in your designs:

1. Write down the following SCSS code in your main.scss project file:

   @import 'susy;
   
   $susy: (
     columns: 3,
     gutters: 0,
     output: float,
   );
   
   body {
     @include container();
   }
   
   section {
     @include span(2 first);
   }
   aside {
     @include span(1 last);
   }

2. Compile the Sass template from the first step into CSS code by running the following command in your console:

   sass -r susy main.scss
   

3. Now, you will find a CSS code like that shown here outputted in your console...