compass-sasssusy-compasssusy-sasssusysusy-next

What happened with gutter function/mixin in Susy 2?


This's my susy config

$susy: (
    flow: ltr,
    math: fluid,
    output: float,
    gutter-position: right,
    container: 1000px,
    container-position: center,
    columns: 12,
    gutters: .15,
    column-width: false,
    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,
    )
);

Test code:

.test {
    @include gutter();
    margin-bottom: gutters();
}

After compiling they'r return nothing...

Or

.test {
      margin-left: span(2) + gutters(2);
}

Displays an error: Invalid null operation: "15.75092% plus null"

What's the problem?


Solution

  • Your layout settings are wrong, so your gutters are undefined and hence the null values you are getting.

    It's gutter-position: after, not gutter-position: right. (The valid settings are these).

    See it working here.

    (Spoiler alert, output for your code is

    .test {
      margin-right: 1.0989%;
      margin-bottom: 1.0989%;
    }
    
    .test2 {
      background: red;
      margin-left: 22.72766%;
    }