Susy: override bleed() at breakpoint

Question

How do I undo the bleed-x() mixin at a smaller breakpoint so box4 (the yellow box) in example 2 goes back in between the purple columns and doesn't wrap to the next line.

 .story4 {
  @include bleed-x();
  @include span(2);
  background: yellow;
  height: 80px;
  @include breakpoint($small) {
    @include span(8 last);
  }
}

Codepen: http://codepen.io/meijioro/pen/aBdWyO

Answer 1

Bleed is a combination of negative margins and positive padding. Reset both to 0 to override:

@include breakpoint($small) {
  @include span(8 last);
  margin: 0;
  padding: 0;
}

In general, I try to avoid breakpoint overrides by limiting the original application. Something more like this:

.story4 {
  @include span(2);
  background: yellow;
  height: 80px;

  // use your own tools to create max-width breakpoints...
  // this limits the bleed, so we don't have to override it later.
  @media (max-width: $small) { 
    @include bleed-x();
  }

  @include breakpoint($small) {
    @include span(8 last);
  }
}