Neat/omega 网格问题

Question

我对 Neat 还很陌生，目前正在研究一个显示图片库的简单网格。

我的代码

$mobile: new-breakpoint(max-width 500px);
$tablet: new-breakpoint(max-width 768px);

article{
  background-color: #efefef;
  margin-bottom: 2em;

  @include span-columns(3);
  @include omega(4n);

  @include media($tablet){
    background-color: orange;
    @include span-columns(4);
    @include omega(3n);
  }

  @include media($mobile){
    background-color: yellow;
    @include span-columns(6);
    @include omega(2n);
  }
}

现在在桌面上所有显示都正常，但是当我为 tablet 或 mobile 调整大小时，布局中断并且我变得很大我的布局中的空白...我知道这是我遗漏的一件愚蠢的小事，但就是看不到它（（（我希望有人能帮助我。

Answer 1

Omega 使用 Neat 可能有点棘手。我建议使用互斥媒体查询来解决您的问题，您可以在此处阅读更多相关信息：

https://github.com/thoughtbot/neat#how-do-i-use-omega-in-a-mobile-first-workflow

这会阻止 omega 声明持续存在并破坏您的布局。

我会调整您的代码，使其看起来像这样：

$mobile: new-breakpoint(max-width 500px);
$tablet: new-breakpoint(min-width 501px max-width 768px);
$desktop: new-breakpoint(min-width 769px);

article{
  margin-bottom: 2em;
  @include media($mobile){
    background-color: yellow;
    @include span-columns(6);
    @include omega(2n);
  }

  @include media($tablet){
    background-color: orange;
    @include span-columns(4);
    @include omega(3n);
  }

  @include media($desktop){
    background-color: #efefef;
    @include span-columns(3);
    @include omega(4n);
  }
}

我在这里做了一个快速笔，所以你可以看到它的实际效果：

http://codepen.io/mikehdesign/pen/qajxrW

这个例子的高度只是添加到article，如果你有内容就不需要了。

希望对您有所帮助

Neat/omega 网格问题

Neat/omega grid issue

sass

neat