frameworks - 使用波旁威士忌整洁网格的断点

Question

我正在尝试使用纯净的波旁威士忌，我整理了大多数东西，但是在创建断裂点时遇到了一些障碍。

我更喜欢为移动设备，平板电脑，台式机和大型台式机创建单独的sass文件，而且我通常不使用冒泡方式创建媒体查询，因为我不喜欢它不只是创建一个通过cs发出音调的媒体查询文件。但是到目前为止，我似乎只能找到有关冒泡方法的文档。

Article on how to use breakpoints in neat

这是我所做的:

$largedesktop-size:em(1050);

    // Bourbon Neat Breakpoints
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16);


 @include media($largedesktop) { 
    body{
        background:black;
    }
  }

我也尝试过这样做，它确实会更新bg颜色，但不会更新视觉网格:

// Media Queries Breakpoints
$tablet-size:em(700);

@include media(min-width $tablet-size 8) {
    body{
        background:orange;
    }
  }

Answer 1

我实际上已经弄清楚了，我的主要问题只是我如何组织.scss文件，而这就是方法。

文件结构如下:

@import 'bourbon/bourbon';
@import 'variables';
@import 'neat/neat';

@import 'base';

// Media Queries
@import 'mobile';
@import 'tablet';
@import 'desktop';
@import 'largedesktop';

变量必须在导入变量之前进行。

在_variables.scss中添加查询，如下所示:

$mobile-size:em(320);
$tablet-size:720px;
$desktop-size:em(960);
$largedesktop-size:em(1050);

// Bourbon Neat Breakpoints
$mobile: new-breakpoint(min-width $mobile-size 4);
$tablet: new-breakpoint(min-width $tablet-size 8);
$desktop: new-breakpoint(min-width $desktop-size 12);
$largedesktop: new-breakpoint(min-width $largedesktop-size 16);

然后(这就是我喜欢的组织方式)为移动设备，平板电脑，台式机和largedesktop创建一个scss文件，并在_base.scss之后导入–我已在上面说明了文件的结构。

在每个内部添加媒体查询以及所需的布局更改。

像这样:
_mobile.scss

@include media($mobile) {
    body {
        background: purple;
    }
}

那应该为您工作。

正如我所说的，这是我的工作方式，我相信还有很多其他人，但是我想让人们知道遇到问题的一种方式:)