Question

我第一次使用波旁威士忌，并且它的表现并不像我期望的那样 - 这可能意味着我犯了错误。

我正在开发移动优先，所以我希望我的桌面断点和更大的断点之间的布局保持一致（用于级联到下一个断点的样式）。但是，我的布局会跳回到移动布局，除非我在更大的断点中再次重新定义样式。

以下是我在base / _grid-settings.scss中定义断点的方法：

    // Neat Overrides
    $grid-columns: 4;
    $max-width: 90%;

    // Breakpoints
    $first-breakpoint-value: 641px;
    $second-breakpoint-value: 1024px;
    $third-breakpoint-value: 1440px;
    $fourth-breakpoint-value: 1920px;

    $tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );
    $desktop: new-breakpoint(min-width em($second-breakpoint-value + 1) max-width em($third-breakpoint-value) 12 );
    $large: new-breakpoint(min-width em($third-breakpoint-value + 1) max-width em($fourth-breakpoint-value) 12 );
    $xlarge: new-breakpoint(min-width em($fourth-breakpoint-value +1) 12 );

然后我的元素看起来像这样：

.container {
  @include outer-container;

  .swatch {
    // mobile styles (here my swatch has a width of 100%) 
    border: 1px solid #000;
    text-align: center;
    margin-bottom: $gutter;

    //MEDIA QUERIES
    @include media($tablet) {
      @include span-columns(4);
      @include omega(2n); 
     }

    @include media($desktop) {
      @include span-columns(3);
      @include omega(4n); 
      padding: 2em -0px;
     }

    @include media($large) { }

    @include media($xlarge) { }
  }
}

现在我期待我的$desktop媒体查询中的样式一直级联到$xlarge媒体查询，但是目前.swatch元素跳回到100％的它是$large和$xlarge断点处的父容器。我做错了什么？如果我希望样式级联起来，我不需要为每个断点重复相同的代码。

Answer 1

您正在定义媒体查询范围，这就是它在两者之间捕捉回移动视图的原因。

从断点中删除最大值，值将级联到桌面。

我不太熟悉整洁，但以下应该有效：

$tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );

变为：

$tablet: new-breakpoint(min-width em($first-breakpoint-value) 8);

Answer 2

谢谢@nickspiel - 这是答案的一半！你是对的，添加min - 只有断点是让样式级联断点的方法。使用Bourbon Neat和使用omega的元素这样做有点棘手。

似乎我有两个选择：

使用媒体查询拆分as per the docs，但是您需要为每个断点设置样式。
将您的最小宽度断点与Omega reset结合使用 - 我会选择此选项。

Answer 3

希望这可以帮助你或任何其他人阅读这篇文章，我有一个类似的问题，发现这个方便的欧米茄重置mixin。

http://www.joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat

在我的移动优先设置中，Bourbon整洁的表现并不像预期的那样

3 个答案: