Bourbon ordinate più punti di interruzione

Question

So che segue può essere fatto in bourbon ordinata:

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

allora posso fare qualcosa di simile:

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

Funziona benissimo. Ora devo aggiungere stili che influiscono su dispositivi mobili e tablet. Sto cercando l'unione tra mobile e tablet breakpoint.

//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

Non sono sicuro se qualcuno è ancora bisogno di questo, ma ho fatto una funzione seguente:

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

che funziona per me più che bene.

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

Produce

@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

Questa non è una risposta Bourbon-correlati, ma in ogni caso.

C'è un'estensione Compass che fa esattamente quello che vuoi: Breakpoint Slicer.

Basta impostare i punti di interruzione in questo modo:

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

E poi basta colmare le lacune tra i punti di interruzione (chiamati "fette") con il corto at, from, to e between mixins. Ad esempio, @include at(2) imposterà una query multimediale min-width: 320px, max-width: 760px.

Con l'ecosistema di numerose potenti estensioni Compass, non c'è davvero alcun motivo per ubriacarsi con Bourbon. Per una potente griglia semantica, utilizzare Singularity, si integra bene con Breakpoint e Breakpoint Slicer.

Answer 3

Se si desidera raggiungere mobile e tablet per uno stile specifico, penso che la soluzione migliore sarebbe creare un nuovo punto di interruzione:

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

E vengono aggiunti a questo punto di interruzione tutti i vostri CSS specifica.