バーボングリットを使用したブレークポイント

Question

私はバーボンのためにきちんと使用しようとしています。ほとんどのものが整理されていますが、ブレークポイントの作成にはいくつかのロードブロックがあります。

私はモバイル、タブレット、デスクトップ用に別々のファイルを作成することをお勧めします& 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); 

_base.scss後モバイル、タブレット、デスクトップ& largedesktopと輸入のためのSCSSファイルを作成します - ファイルをどのように構造化するべきかを上に示しました。

それぞれの内側には、必要なレイアウト変更とともにメディアクエリが追加されます。あなたのために働く必要があります _mobile.scss

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

：このような

。

私はこれは私がそれをやった方法です言ったように、私は多くの人があると確信していますが、私は、彼らが問題を抱えている場合は、人々が一つの方法を知ってもらいたい:)

Answer 2

私がブレークポイントと同様の問題を抱えていたし、グリッドを更新します。しかし、少し違うトラック...

ここは私を助けたものです。これは、main documentationのではなく、です。ニートGitHub pageで

、thoughtbotチームは説明しています

1. あなたは_grid-settings.scssファイルを作成する必要が

2. インポートし、右でニート

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

3. をインポートする前に_グリッド設定。この設定を追加する前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)