Using susy with libsass - wrong output

Question

I'm using libsass as it's faster than ruby sass and importing susy using bower.

@import "../bower_components/susy/sass/susy";

$susy: (
    columns: 12,
    gutter-position: inside,
    global-box-sizing: border-box
);

#content {
    background-color: red;
    @include span(9);
}

#sidebar {
    background-color: blue;
    @include span(3);
}

And the output is:

#content {
  background-color: red;
  width: 75%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

#sidebar {
  background-color: blue;
  width: 25%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

It doesn't work properly, it breaks the page. However the ruby sass output changes only the padding to 0.83333% and everything is right.

As you can see above the libsass padding output is way different from the ruby sass output.

What is wrong and how to fix it?

Answer 1

I realized that it's not wrong at all, I forgot to add: @include border-box-sizing;

I hope it helps others.