Question

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

为简单起见，我坚持使用12列网格，并避免任何嵌套。我希望在$ tablet断点处显示六列浮点范围，在$桌面断点处显示三列浮点数。在下面的要点中，我将这些替代显示称为断点组。

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

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

修改

这是正确的方法。谢谢Jan

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

Answer 1

由于使用最小宽度，一些样式从较低的断点继承到较大的断点，您需要覆盖较高断点中的类设置，在您的示例中是明确的：在每个第二个元素上然后在某个宽度上设置被覆盖，因为.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);
  }
}
}

＆amp;：nth-child（n）基本上重置了尺寸设置和＆amp;：nth-child（4n + 4）修复了最后一个

奇点网格中断点内的float-spans的正确标记是什么

1 个答案: