css - Susy:在断点处覆盖 bleed()

Question

如何在较小的断点处撤消 bleed-x() 混合，以便示例 2 中的 box4(黄色框)返回到紫色列之间并且不会换行到下一行。

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

代码笔: http://codepen.io/meijioro/pen/aBdWyO

Answer 1

出血是负边距和正填充的组合。将两者都重置为 0 以覆盖:

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

一般来说，我尽量通过限制原始应用程序来避免断点覆盖。更像这样:

.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);
  }
}