css - Bourbon neat 在我的移动优先设置中表现不佳

Question

我第一次使用 bourbon neat，它的表现并不完全符合我的预期 - 这可能意味着我设置错误。

我正在开发移动设备优先，所以我希望我的布局在我的桌面断点和我的较大断点之间保持相同(以便样式级联到下一个断点)。但是，除非我在较大的断点中再次重新定义样式，否则我的布局会跳回移动布局。

这是我在 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

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

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

我对 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);