Susy列和断点乱序列表？答案

【问题标题】：Susy columns and breakpoints disorder list?Susy列和断点乱序列表？
【发布时间】：2012-11-12 02:28:08
【问题描述】：

我正在使用 Susy 及其断点来执行一些媒体查询布局，但我遇到了一个奇怪的问题，<li> 的顺序不同，这很奇怪。

在此处查看案例（警告 NSFW）：http://cl.ly/L6Xf 和此处http://cl.ly/L6cd

// Grid
.page
  +container
  +susy-grid-background

// Profiles
#profiles
  ul
    margin-top: 2.5em
    li
      height: 160px
      +span-columns(5)
      &:nth-child(2n)
        +omega         
      margin-bottom: 2.2em
      border: 5px solid $white
      overflow: hidden
      img
        width: auto
        height: 100% 
      span
        background: $white
        padding: 5px 10px
        position: absolute


+at-breakpoint(30em 12)
  #profiles ul li
    +span-columns(4, 12)
    &:nth-child(3n)
      +omega

谢谢，

【问题讨论】：

NSFW 警告可能对这些图像很好。

标签： css sass media-queries

【解决方案1】：

在您的新断点处，您需要先从 2n 中删除 omega，然后再将其添加到 3n。否则，您在 2n 和 3n lis 上都设置了 omega。

+at-breakpoint(30em 12)
  #profiles ul li
    +remove-nth-omega(2n)
    +span-columns(4, 12)
    +nth-omega(3n)

【讨论】：

谢谢！这似乎是完美的解决方案！