cssgridsassfrontendsusy-compass

Why Susy gives 49.15254% in output CSS instead of 50%?


I've made decision to get started with Susy, because I wanted good framework just for grids. Unfortunately I found myself trying hard to make exact what I want. After all I want to know why Susy gives so strange math rules.

There are my Susy's simple setings:

$susy: (
    columns: 12,
    math: fluid,
    output: float,
    gutter-override: no-gutters,    
);

As you can see, I removed gutters as above (don't know if it's best way to do this eg. I've noticed someone using gutters: 0 or even gutters: null ).

Finally, I found solution for strange 49.15254%:

$susy: (
    columns: 12,
    math: fluid,
    output: float,
    gutter-override: no-gutters,
    gutter-position: inside,
);

Can someone explain me why Susy made any gutters (or smth), even when gutter-override: no-gutters was given?


Solution

  • The purpose of gutter-override is to change the gutter output without changing the underlying math of the grid. All no-gutters does is turn off the gutter output. It's not meant to be used globally, like that. To actually change the grid math, you need to set gutters: 0.

    When you use gutter-position inside, you make it so the grid math is the same either way — because the size of the gutters doesn't effect the size of the columns.