Can't get susy to use gutter in 'px' while in math:static mode

Question

I want to create a fixed non-flexible very damn static grid of 1200px. So I figured out, I need 90px for column-width, 12 columnts, 10px of gutter and 1200px of max-width.

Well.. the following are my settings and it gives me an error "invalid null opearation: 11 times null "

$susy: (
  flow: ltr,
  math: static,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 12,
  gutters: 10px,
  column-width: 90px,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: overlay,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

style.scss>

    @import "grids";

body{
    @include container($susy);
    max-width: 1200px;

    border: solid thin red;
    height:10px;

}

yivi · Accepted Answer · 2014-12-22T08:56:40.330

You need to specify gutters proportionally to your columns.

In this case:

gutters: 1/9,

The end result (being your columns 90px) would be gutters 10px wide. You can specify your gutters width in pixels by expressing it as a proportion.

As per the docs, you can speficy gutter width in pixels, by putting the column width as well. E.g.:

gutters: 10px/90px

Alhtough the result is exactly the same. And if you put in a value that doesn't match with your column width, you won't get the pixel width you say, but the appropriate fraction.

So having:

column-width: 100px,
gutters: 10px/50px,

will leave you with 20px wide gutters. Because of math. :)

Pen showing it working here.

And finally, your layout is 1190px wide and not 1200px because:

12 columns * 90px = 1080px

11 gutters * 10px = 110px.

1180px + 110px = 1190px.

Can't get susy to use gutter in 'px' while in math:static mode

1 Answers1