0

我正在学习断点、奇点和浮动跨度，但我无法让它们很好地结合在一起。

为简单起见，我坚持使用 12 列网格，并且避免了任何嵌套。我想在 $tablet 断点处显示六列浮点跨度，在 $desktop 断点处显示三列跨度。在下面的要点中，我将这些替代显示称为断点组。

http://sassmeister.com/gist/1cca897661125564db41

每个断点组都独立于其他组工作，但在同一个 scss 中组合时会出现问题。不知道我做错了什么。错误的 scss 或第 n 个值之间的某些冲突？

编辑

这是正确的方法。谢谢简

http://sassmeister.com/gist/04adc7d2c992f3d48736

4

1 回答 1

1

由于它使用 min-width 某些样式从较低的断点继承到较大的断点，因此您需要覆盖较高断点中的类设置，在您的示例中很清楚：在每个第二个元素上正确，然后覆盖一些宽度设置以及因为 .tile:nth-child(2n+2) 在更高的断点中比 .tile 更强...您可以通过执行类似的操作来修复它：

@include breakpoint($desktop, true) {
  .tile {
  border: 1px solid;
  margin-bottom: 20px;
  &:nth-child(n){
      @include float-span(3);
      clear:none;
  }
  &:nth-child(4n+4) {
      @include float-span(3,last);
  }
}
}

&:nth-child(n) 基本上重置了大小的设置， &:nth-child(4n+4) 修复了最后一个

于 2014-08-13T13:21:57.787 回答