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

次に (これが私の好みの整理方法です) モバイル、タブレット、デスクトップ、ラージデスクトップ用の scss ファイルを作成し、_base.scss の後にインポートします。

それぞれの内部に、必要なレイアウト変更とともにメディア クエリを追加します。

このように: _mobile.scss

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

それはあなたのために働くはずです。

これが私がやった方法だと言ったので、他にもたくさんあると思いますが、問題がある場合は1つの方法で人々に知らせたいと思いました:)

于 2013-04-04T16:45:41.890 に答える