Susy gutters in pixels

Question

Can i put gutters in pixels?

I tried to put pixels in gutter variable, but i get an error.

I make simple example.

@import "susy";

// Colors
// - - - - - - - - - - - - - - - - - -

$col: (
        _1: #96ceb4,
        _2: #ffeead,
        _3: #ff6f69,
        _4: #ffcc5c,
        _5: #88d8b0,
        _6: #ee4035,
        _7: #f37736,
        _8: #fdf498,
        _9: #7bc043,
        _10: #0392cf,
        _11: #e39e54,
        _12: #4d7358
);

// Responsive grid
// - - - - - - - - - - - - - - - - - -

$columns: 12;

$susy: (
        columns: $columns,  // The number of columns in your grid
        container: 80%,
        gutters: 1/4, // The size of a gutter in relation to a single column
        gutter-position: inside,
        math: fluid,
        output: float,
        flow: ltr,
        global-box-sizing: border-box
);

@include border-box-sizing();

html, body {
  height: 100%;
}

body {
  min-height: 100%;
}

.wrapper {
  @include container();
  min-height: 100%;
}

@for $i from 1 through $columns {
  .col-#{$i} {
    @include span($i);

    &.mod-display {
      padding-top: 20px;
      padding-bottom: 20px;
      content: '.col-#{$i}';
      background-color: map-get($col, _#{$i});
      border: 1px solid darken(map-get($col, _#{$i}), 20);
      opacity: .5;
    }
  }
}

If it's possible, can i combine these gutters with different containers (percent, pixel)?

Answer 1

Yes. You need to set gutter-position to inside-static and then set a column-width to calculate the gutters based on. Since you have math set to fluid, the column-width setting will only be used for the gutters, and not the columns.