8

我正在尝试使用整洁的波旁威士忌,并且我已经解决了大多数事情,但是在创建断点时我遇到了一些障碍。

我更喜欢为移动设备、平板电脑、台式机和大型桌面制作单独的 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;
    }
  }
4

3 回答 3

18

我实际上想出了这个,我的主要问题只是我如何组织我的 .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;
    }
}

那应该对你有用。

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

于 2013-04-04T16:45:41.890 回答
10

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

这对我有帮助。这不在主要文档中。

在 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。

于 2014-09-18T20:26:34.083 回答
2

对于它可能关心的人来说,我的问题不是我的导入顺序错误,而是我如何使用我的变量。我以为函数需要一个字符串...

这是错误的:

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

这是对的:

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width $desktop)
于 2014-09-28T18:07:33.593 回答