使用Bourbon Neat网格的断点

Question

我正在尝试使用neat for bourbon，并且我已经解决了大部分问题，但是在创建断点时遇到了一些障碍。

我喜欢为移动设备、平板电脑、桌面电脑和大型桌面电脑创建单独的sass文件，通常不使用冒泡来创建我的媒体查询，因为我不喜欢它不仅会创建一个媒体查询，而是在整个css文件中都会创建多个。但是到目前为止，我只能找到冒泡方法的文档。

有关在neat中使用断点的文章

这是我所做的：

$largedesktop-size:em(1050);

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


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

我也试过这个方法，虽然可以更新背景颜色，但无法更新视觉网格：

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

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

- Daimz

---

你能修复我的问题吗？这是链接：http://stackoverflow.com/questions/24721937/website-not-displaying-properly-on-devices-but-does-ok-on-browser - designerNProgrammer

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之后导入 - 我已经说明了文件应该如何结构。

在每个文件中添加您所需的媒体查询和布局更改。

像这样： _mobile.scss

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

那应该对你有用。

就像我说的那样，这是我做过的一种方法。我相信还有很多其他方法，但我想让人们知道一个方法，如果他们遇到问题的话 :)

- Daimz

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

在 _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，如果那有关系的话。

- user3647674

---

这肯定应该是被接受的答案 - 那个 neat-helpers 文件非常重要。 - byronyasgur

Answer 3

致关注此事者，我的问题不在于我导入的顺序有误，而在于我如何使用变量。我认为该函数接受一个字符串...

以下是错误的做法：

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

这是正确的:

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

- Design by Adrian