奇点网格中断点内浮动跨度的正确标记是什么?

Question

我正在学习断点，奇点和浮动跨度，但我不能让他们很好地发挥在一起。

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

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

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

---

编辑

这是正确的做法。由于1月

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

Answer 1

因为它使用的是最小宽度，一些样式是从较低的断点继承到较大的，你需要在较高的断点中重写类设置，在你的例子中很清楚:对每第二个元素，然后一些宽度设置也被重写，因为。tile:n -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);
  }
}
}

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