Bourbon ordentlich mehr Haltepunkte

Question

Ich weiß, kann folgende ordentlich in Bourbon erfolgen:

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

dann kann ich etwas tun:

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

Es funktioniert großartig. Jetzt muss ich Stile hinzufügen, die sich auf Mobilgeräte und Tablets auswirken. Ich suche nach einer Verbindung von Handy und Tablet-Haltepunkt.

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

nicht sicher, ob jemand noch diese benötigen, aber ich habe eine folgende Funktion:

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

, die gut für mich funktioniert.

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

Produziert

@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

Dies ist keine Bourbon-bezogene Antwort, aber wie auch immer.

Es gibt eine Erweiterung, die genau das tut, was Sie wollen: Breakpoint Slicer.

Sie einfach richten Sie Ihre Haltepunkte wie folgt aus:

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

Und dann adressieren nur die Lücken zwischen den Haltepunkten (so genannte „Scheiben“) mit den kurzen at, from, to und between Mixins. Zum Beispiel wird @include at(2) eine min-width: 320px, max-width: 760px Medienabfrage setzen.

Mit dem Ökosystem zahlreicher mächtiger Compass Extensions gibt es wirklich keinen Grund, sich mit Bourbon betrunken zu machen. Verwenden Sie für ein leistungsstarkes semantisches Grid Singularity, es integriert sich gut mit Breakpoint und Breakpoint Slicer.

Answer 3

Wenn Sie für einen bestimmten Stil Handy und Tablet-Ziel, ich denke, Ihre beste Option, um einen neuen Haltepunkt erstellen würde:

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

Und fügen Sie unter diesem Haltepunkt alle Ihre spezifische CSS

.