Bourbon schludne wielokrotne punkty przerwania

Question

wiem Poniżej można zrobić w bourbona schludny:

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

wtedy mogę zrobić coś takiego:

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

Działa świetnie. Teraz muszę dodać style, które wpływają na telefon i tablet. Szukam związku punktu przerwania na urządzeniach mobilnych i tabletach.

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

Nie wiem, czy ktoś jeszcze potrzebuje tego ale zrobiłem następującą funkcję:

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

który pracuje dla mnie dobrze.

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

Produkuje

@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

To nie jest odpowiedź związana z Bourbonem, ale tak czy inaczej.

Istnieje rozszerzenie Compass, które robi dokładnie to, co chcesz: Breakpoint Slicer.

Wystarczy skonfigurować punkty przerwania tak:

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

A potem po prostu zająć się luki między przerwań (zwana „plastry”) z krótkimi at, from, to i between wstawek. Na przykład @include at(2) ustawi zapytanie o media na min-width: 320px, max-width: 760px.

Wraz z ekosystemem licznych potężnych rozszerzeń kompasu, nie ma powodu, by pić Bourbon. Dla potężnej siatki semantycznej, użyj Singularity, dobrze integruje się z Breakpoint i Breakpoint Slicer.

Answer 3

Jeśli chcesz kierować telefony komórkowe i tablety dla konkretnego stylu, myślę, że najlepszym rozwiązaniem byłoby utworzyć nowy punkt przerwania:

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

I dodać pod tym przerwania cały swój specyficzny css.