breakpoint sử dụng bourbon gọn gàng lưới

Question

Tôi đang cố gắng sử dụng gọn gàng cho bourbon và tôi đã có hầu hết mọi thứ được phân loại nhưng tôi đánh một số khối đường khi nói đến việc tạo ra các điểm phá vỡ.

Tôi thích tạo các tệp sasserate riêng biệt cho điện thoại di động, máy tính bảng, máy tính để bàn & largedesktop và tôi thường không sử dụng bọt để tạo các truy vấn phương tiện truyền thông của mình vì tôi không thích cách nó tạo ra một truy vấn phương tiện thông qua tệp css. Nhưng cho đến nay tôi chỉ có thể tìm thấy tài liệu về phương pháp sủi bọt.

Article on how to use breakpoints in neat

Dưới đây là những gì tôi đã làm:

$largedesktop-size:em(1050); 

    // Bourbon Neat Breakpoints 
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16); 


@include media($largedesktop) { 
    body{ 
     background:black; 
    } 
    } 

Tôi cũng đã cố gắng này, mà không cập nhật các màu bg nhưng không cập nhật lưới trực quan:

// Media Queries Breakpoints 
$tablet-size:em(700); 

@include media(min-width $tablet-size 8) { 
    body{ 
     background:orange; 
    } 
    } 

Answer 1

Tôi thực sự đã tìm ra điều này, vấn đề chính của tôi là chỉ với cách tôi đã tổ chức các tệp .scss của tôi nhưng đây là cách thực hiện.

cấu trúc tập tin như thế này:

@import 'bourbon/bourbon'; 
@import 'variables'; 
@import 'neat/neat'; 

@import 'base'; 

// Media Queries 
@import 'mobile'; 
@import 'tablet'; 
@import 'desktop'; 
@import 'largedesktop'; 

biến phải đi trước khi nhập các biến.

trong _variables.scss thêm truy vấn của bạn như sau:

$mobile-size:em(320); 
$tablet-size:720px; 
$desktop-size:em(960); 
$largedesktop-size:em(1050); 

// Bourbon Neat Breakpoints 
$mobile: new-breakpoint(min-width $mobile-size 4); 
$tablet: new-breakpoint(min-width $tablet-size 8); 
$desktop: new-breakpoint(min-width $desktop-size 12); 
$largedesktop: new-breakpoint(min-width $largedesktop-size 16); 

Sau đó (đây là cách tôi muốn tổ chức mọi thứ) tạo ra một tập tin SCSS cho điện thoại di động, tablet, máy tính để bàn & largedesktop và nhập khẩu sau khi _base.scss - Tôi đã minh họa ở trên cách các tệp phải được cấu trúc.

Bên trong mỗi lần thêm truy vấn phương tiện của bạn cùng với các thay đổi bố cục cần thiết.

như thế này: _mobile.scss

@include media($mobile) { 
    body { 
     background: purple; 
    } 
} 

Điều đó sẽ làm việc cho bạn.

Như tôi đã nói đây là cách tôi đã làm nó, tôi chắc chắn có rất nhiều người khác nhưng tôi muốn cho mọi người biết một cách nếu họ gặp vấn đề :)

Answer 2

Tôi đã có một vấn đề tương tự với breakpoint và với việc cập nhật lưới. Theo dõi hơi khác, mặc dù ...

Đây là những gì đã giúp tôi. Đây là không phải trong số main documentation.

Trên Neat GitHub page, đội thoughtbot giải thích:

1. Bạn cần phải tạo một tập tin _grid-settings.scss

2. nhập khẩu nó ngay trước khi nhập Neat

   @import "bourbon/bourbon"; // or "bourbon" when in Rails 
   @import "grid-settings"; 
   @import "neat/neat"; // or "neat" when in Rails 
   

3. Trong _grid-settings.tập tin SCSS, nhập khẩu gọn gàng-những người giúp đỡ

   @import "neat/neat-helpers"; // or "neat-helpers" when in Rails 
   
   // Define your breakpoints 
   $tablet: new-breakpoint(max-width 768px 8); 
   $mobile: new-breakpoint(max-width 480px 4); 
   etc 
   

Trước khi thêm thiết lập này, tôi có thể nhìn thấy lưới điện, nhưng lưới điện sẽ không đáp ứng với yêu cầu breakpoint của tôi để cập nhật các cột hoặc thay đổi vị trí thành phần. Khi tôi đã có các cài đặt này, lưới sẽ hoạt động như tôi mong đợi.

Tôi đang sử dụng CodeKit 2, nếu điều đó quan trọng.

Answer 3

Đối với bất cứ ai có thể quan tâm, vấn đề của tôi không phải là tôi đã sai thứ tự nhập khẩu, nhưng làm thế nào tôi sử dụng các biến của tôi. Tôi nghĩ chức năng mất một chuỗi ...

này là sai:

$desktop: 1200px 
$tablet: new-breakpoint(min-width 600px max-width #{$desktop}) 

này là đúng:

$desktop: 1200px 
$tablet: new-breakpoint(min-width 600px max-width $desktop)