Within susy 2 I could use beneath code to make a inner element wider than the parent.

<div>
  <p>Some random content</p>
</div>

$susy: ( columns: 12 );
div{
  @include span(10 nest);
  @include squish(1);
}
p{
  @include span(12 of 10);
  @include pull(1 of 10);
}

I was trying to do the same, but couldn't recreate it logical.

$susy: ( columns: susy-repeat(12) );
div{
  width: span(10);
  margin-left: span(1 wide);
  margin-right: span(1 wide);
}
p{
  margin-left: - span(1 wide of 10);
  width: span(12 of 10);
}

This creates the error on width: span(12 of 10);:

Error: [su-valid-location] There are not enough columns in grid 1 1 1 1 1 1 1 1 1 1 for span 12 at 1.

Using width: span(6 of 10) * 2 + gutter(of 10); would work, but feels a bit hacky. Is there a better method to have a element bigger than it's parent?