Question

我正在尝试使用整洁的波旁威士忌，我已经解决了大部分问题，但是在创建断点时我遇到了一些障碍。

我更喜欢为手机，平板电脑，桌面设备制作单独的sass文件。 largedesktop和我通常不会使用冒泡来创建我的媒体查询，因为我不喜欢它不仅仅创建一个媒体查询，它通过css文件发出声音。但到目前为止，我似乎只能找到关于冒泡方法的文档。

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

然后（这就是我喜欢组织的东西）为移动设备，平板电脑，桌面设备创建一个scss文件。在_base.scss之后的largedesktop和import - 我已经说明了文件应该如何构建。

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

像这样： _mobile.scss

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

那应该适合你。

正如我所说，我就是这样做的，我相信还有很多其他人，但我想让人们知道如果遇到问题，可以采用一种方式：）

Answer 2

我遇到了类似断点和更新网格的问题。虽然有一点不同的轨道......

这对我有所帮助。这是<{3}}中的不。

在整洁main documentation上，思想机构团队解释说：

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

在导入Neat之前导入它

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

在_grid-settings.scss文件中，导入neat-helpers

@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)

断点使用波旁网格

3 个答案: