Question

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

 .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

出血是负边距和正面填充的组合。将两者重置为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);
  }
}

Susy：在断点处覆盖出血（）

1 个答案: