波旁威士忌在我的手机第一次设置中没有表现出预期的效果

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元素在$large和$xlarge断点处跳回到其父容器的100%。我做错了什么？如果我希望样式级联，就不需要为每个断点重复相同的代码。

Answer 1

您正在定义一个媒体查询范围，这就是为什么它会在两者之间快速返回到移动视图。

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

我对neat不太熟悉，但以下内容应该有效：

$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

希望这能帮助你或其他阅读这篇文章的人，我也遇到了类似的问题，并找到了这个方便的omega重置mixin。

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

Answer 3

谢谢@nickspiel——答案只有一半！您是正确的，添加只有断点的min是获得样式级联断点的方法。使用Bourbon Neat和使用omega的元素来实现这一点有点棘手。

我似乎有两个选择：

1. 根据文档，使用媒体查询拆分，但您需要为每个断点设置样式
2. 将你的最小宽度断点建议与Omega重置结合使用——我选择这个选项