Bourbon gọn gàng nhiều breakpoint

Question

Tôi biết sau đây có thể được thực hiện trong bourbon gọn gàng:

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

sau đó tôi có thể làm một cái gì đó như thế này:

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

Nó hoạt động tuyệt vời. Bây giờ tôi phải thêm các kiểu ảnh hưởng đến thiết bị di động và máy tính bảng. Tôi đang tìm kiếm sự kết hợp giữa điểm ngắt thiết bị di động và máy tính bảng.

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

Không chắc nếu có ai vẫn cần điều này, nhưng tôi đã thực hiện một chức năng sau:

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

làm việc cho tôi tốt.

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

Tạo

@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

Đây không phải là câu trả lời liên quan đến Bourbon, nhưng dù sao đi nữa.

Có một phần mở rộng Compass thực hiện chính xác những gì bạn muốn: Breakpoint Slicer.

Bạn chỉ cần thiết lập breakpoint của bạn như thế này:

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

Và sau đó chỉ cần giải quyết những khoảng trống giữa breakpoint (gọi là "lát") với ngắn at, from, to và between mixins. Ví dụ: @include at(2) sẽ đặt một truy vấn phương tiện min-width: 320px, max-width: 760px.

Với hệ sinh thái của nhiều tiện ích mở rộng La bàn mạnh mẽ thực sự không có lý do gì để đi say rượu với Bourbon. Đối với một lưới ngữ nghĩa mạnh mẽ, sử dụng Singularity, nó tích hợp tốt với Breakpoint và Breakpoint Slicer.

Answer 3

Nếu bạn muốn nhắm mục tiêu di động và máy tính bảng cho một phong cách cụ thể, tôi nghĩ rằng lựa chọn tốt nhất của bạn sẽ được tạo một breakpoint mới:

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

Và thêm dưới breakpoint này tất cả css cụ thể của bạn.