断点使用波旁整洁网格

Question

我正在尝试使用neat作为bourbon，并且我已经整理了大部分内容，但是当涉及到创建断点时我遇到了一些障碍。

我更喜欢为手机，平板电脑，台式机制作单独的sass文件&我通常不使用冒泡来创建我的媒体查询，因为我不喜欢它不只是创建一个媒体查询，它通过css文件发出音调。但到目前为止，我似乎只能找到一个冒泡方法的文档。

关于如何在整洁

中使用断点的文章

下面是我所做的:

$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);

然后(这就是我喜欢组织事情的方式)为手机，平板电脑，桌面创建一个scss文件&在_base之后导入。我已经在上面说明了文件应该如何结构化。

在每个页面中添加您的媒体查询以及所需的布局更改。

这样的:_mobile.scss

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

你应该没问题。

正如我所说的，这就是我是如何做到的，我相信还有很多其他的方法，但我想让人们知道一种方法，如果他们有问题的话:)

Answer 2

我在断点和更新网格时遇到了类似的问题。不过轨道略有不同…

这是帮助我的。这是而不是主文档中的。

在Neat GitHub页面上，thoughtbot团队解释说:

1. 您需要创建_grid-settings。scss文件

2. 在导入Neat之前导入

   @import "bourbon/bourbon"; // or "bourbon" when in Rails
   @import "grid-settings";
   @import "neat/neat"; // or "neat" when in Rails
   

3. 在_grid-settings。SCSS文件，导入整洁助手

   @import "neat/neat-helpers"; // or "neat-helpers" when in Rails
   // Define your breakpoints
   $tablet: new-breakpoint(max-width 768px 8);
   $mobile: new-breakpoint(max-width 480px 4);
   etc
   

在添加此设置之前，我可以看到网格，但是网格不会响应我更新列或更改组件位置的断点请求。一旦我有了这些设置，网格就像我预期的那样工作了。

我正在使用CodeKit 2，如果这很重要。

Answer 3

对于可能关心的人来说，我的问题不是导入的顺序不对，而是我如何使用变量。

这是错误的:

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width #{$desktop})

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width $desktop)