Bourbon Neat 忽略媒体查询中的“欧米茄”

Question

我目前正在使用 Bourbon Neat。我需要 .posts__post 在平板电脑上跨越 3 of 6 列，然后在桌面及更高版本上跨越 2 of 6。但是我发现我的桌面媒体查询不起作用，平板电脑查询仍然通过桌面。

_grid.scss

$tablet: em(768);
$desktop: em(960);

// Breakpoints
$tablet: new-breakpoint(min-width $tablet 6) ;
$desktop: new-breakpoint(min-width $desktop 6);

posts.scss

@include media ($tablet) {
 .posts__post{
    @include span-columns(3 of 6);
    @include omega(2n);
  }
 }

 @include media ($desktop) { 
 .posts__post{
    @include span-columns(2 of 6); // only spans up to 4 columns in total
    @include omega(3n); // still remains as 2n
 }

这是我试图为 [desktop][1.不知道我做错了什么。如果 $desktop 媒体查询中的 omega(3n) 得到遵守，则可以解决此问题，但它不会并保持为 2n。

Answer 1

问题是当 $desktop 媒体查询生效时，它并没有撤消 $tablet omega mixin。所以在 $desktop 你的:nth-child(3n) 没有右边距并且3n+1 被清除左边，但是2n 仍然没有右边距并且2n+1 仍然被清除左边。

您可能还需要编辑媒体查询以在 $tablet 查询中包含 max-width 值。使用 em() mixin 并没有那么痛苦，因为您可以执行以下操作：

$tablet:     em(768);
$tablet-max: em(959);
$desktop:    em(960);

如果您继续将媒体查询变量命名为与断点宽度相同的名称，事情可能会变得令人困惑，因此我建议您使用 $mq-tablet 之类的名称。

或者，您可以将 Flexbox 和 span-columns() 与“block-collapse”显示属性一起使用。根据您的设计，这可能需要对标记进行一些额外的调整。

一般来说，请包含问题的完整工作演示以帮助解决问题。