ブルボンきちんとした複数のブレークポイント

Question

私はきちんとしたバーボンで行うことができる次の知っている：

$mobile: new-breakpoint(max-width: 320px); 
$tablet: new-breakpoint(max-width:760px min-width:321px); 
$desktop: new-breakpoint(min-width: 761px); 

は、私はこのような何かを行うことができます：

@include media($mobile) { 
    // some styling 
} 

それは素晴らしい作品。今ではモバイルとタブレットに影響を与えるスタイルを追加する必要があります。私は、モバイルとタブレットのブレークポイントの組み合わせを探しています。

//desired behavior 
//I know this is not available. Just made up 
@include media($mobile, $tablet) { 
    // some styling. 
    // this should be applied to mobile and tablet 
} 

Answer 1

ない、誰もが、まだこれを必要とされるが、私は次の関数作られている場合を確認します。

@mixin multiple-media($media...) { 
    @each $query in $media { 
    @include media($query) { 
     @content 
    } 
    } 
} 

私のためだけで正常に動作します。

@include multiple-media($mobile-landscape, $tablet-portrait, $tablet-landscape, $laptop, $desktop) { 
    .mobile { 
    @include display(none); 
    } 
} 

が

@media screen and (min-width: 29.25em) and (max-width: 48em) and (max-height: 29.25em) { 
    .logo a .mobile { 
    display: none; } } 
@media screen and (min-width: 29.25em) and (max-width: 50em) and (min-height: 29.25em) { 
    .logo a .mobile { 
    display: none; } } 
@media screen and (min-width: 48em) and (max-width: 80em) and (max-height: 50em) { 
    .logo a .mobile { 
    display: none; } } 
@media screen and (min-width: 80em) and (max-width: 105em) { 
    .logo a .mobile { 
    display: none; } } 
@media screen and (min-width: 105em) { 
    .logo a .mobile { 
    display: none; } } 

Answer 2

これは、とにかくバーボン関連の回答ではありません。

Compassの拡張機能があり、あなたの望むものとまったく同じです：Breakpoint Slicer。

$slicer-breakpoints: 0 320px 760px; 
// Slices:   | 1 | 2 | 3 → 

をそしてちょうど短いat、from、toとbetweenミックスインで（「スライス」と呼ばれる）ブレークポイント間のギャップに対処：

あなたはこのようなあなたのブレークポイントを設定します。たとえば、@include at(2)はmin-width: 320px, max-width: 760pxメディアクエリを設定します。

多くの強力なコンパス拡張のエコシステムでは、実際にバーボンと飲酒する理由はありません。強力なセマンティックグリッドの場合は、Singularityを使用してください。Breakpointとブレークポイントスライサーと統合されています。

Answer 3

あなたが特定のスタイルのためのモバイルとタブレットをターゲットにしたい場合は、私はあなたの最良の選択肢は、新しいブレークポイントを作成することだと思う：

$mobile-to-tablet: new-breakpoint(max-width:760px min-width:321px $cols); 

をそしてこのブレークポイントの下にあるすべてのあなたの特定のCSSを追加します。