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

【问题标题】：What is correct markup for float-spans within breakpoints in a singularity grid什么是奇点网格中断点内的浮点跨度的正确标记
【发布时间】：2014-08-13 12:42:14
【问题描述】：

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

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

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

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

编辑

这是正确的方法。谢谢杨

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

【问题讨论】：

标签： css sass singularitygs

【解决方案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) 修复了最后一个

【讨论】：

我想知道是否发生了一些继承问题，但这有点超出我的工资等级。非常感谢一月。