px-based gutters and implementing bleed in Susy 3

[fabianwitte]

I have a grid that ist configured like this:

$susy: (
  columns: susy-repeat(8), 
  gutters: 20px
)

Inside is a div-Container styled like this:

margin-left: span(1 wide of 8);
width: span(6 of 8)

Now I have a headline inside which need to take all 8 columns again. In Susy 2 I solved this use the bleed-Mixin. How do I implement this in Susy 3? As the result of the span-function is already a calc-Expression, I can not use calc and none of the parameters in the span-function takes negative value.

[mirisuzanne]

For context, how are you handling gutters? Are they applied to padding, or margins?

[fabianwitte]

The gutters are handled using padding and they are split (half on the left, half on the right).

Edit: Happens as well, when I do not split the gutters.

[mirisuzanne]

Yeah, changing that won't fix it - just gives me a better sense how your grid works.

Bleed is basically negative margins, and equal-but-positive gutters. But you're right, Susy doesn't currently allow you to get a negative calc() result. That may be worth addressing.

In the meantime, for padding-based gutters, you may not need Susy. There's a nice Sass alternative, without any third-party plugins:

// span(6 of 8)
width: percentage(6/8);

But that becomes a bit more complex if you are trying to span wide:

// span(1 wide of 8)
width: calc(#{percentage(1/8)} + 20px);

Building the calc yourself, you can make it negative for bleed. Something like this:

margin-left: calc(0% - #{percentage(1/6)} - 20px);
padding-left: calc(#{percentage(1/6)} + 20px);

Sorry that's not ideal. I'll take a look at fixing this in Susy.