断点使用波旁网格

Question

我正在尝试使用整洁的波旁威士忌,我已经解决了大部分事情,但是我在创造突破点时遇到了一些障碍.

我更喜欢为手机,平板电脑,桌面和大型桌面制作单独的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.scss之后导入 - 我已经说明了文件应该如何构建.

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

像这样:_mobile.scss

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

这对你有用.

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

Answer 2

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

这对我有所帮助.这是不是该在主文档.

在Neat GitHub页面上,思想机构团队解释说:

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文件中,导入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,如果这很重要的话.