Punkty przerwania za pomocą bourbon schludny siatki

Question

Próbuję użyć schludny dla Burbon i mam większość rzeczy załatwione, ale uderzam niektórych blokad drogowych, jeśli chodzi o tworzenie punktów przełomowych.

Wolę tworzyć oddzielne pliki sass na telefon komórkowy, tablet, komputer stacjonarny & largedesktop i zwykle nie używam propagacji w celu utworzenia zapytań o media, ponieważ nie podoba mi się, że nie tworzą one tylko zapytania o media, które emituje. przez cały plik css. Ale do tej pory mogę tylko znaleźć dokumentację na temat metody bulgotania.

Article on how to use breakpoints in neat

Oto co zrobiłem:

$largedesktop-size:em(1050); 

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


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

Próbowałem również ten, który jest aktualizowany BG kolor, ale nie aktualizuje siatki wizualnej:

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

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

Answer 1

Właściwie to wymyśliłem, mój główny problem polegał właśnie na tym, jak zorganizowałem moje pliki .scss, ale oto jak to zrobić.

Struktura plików tak:

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

@import 'base'; 

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

Zmienne musi iść przed importowania zmiennych.

w _variables.scss dodać kwerendy tak:

$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); 

Następnie (to jak chciałbym zorganizować rzeczy) utworzyć plik SCSS dla telefonu, tabletu, pulpit & largedesktop i import po _base.scss - Zilustrowałem powyżej, jak powinny wyglądać pliki.

Wewnątrz każdego dodaj zapytanie o media wraz z potrzebnymi zmianami układu.

tak: _mobile.scss

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

To powinno pracować dla Ciebie.

Jak powiedziałem to jest, jak to zrobiłem, jestem pewien, że istnieje wiele innych, ale chciałem, aby ludzie wiedzieli jeden sposób, jeśli są one mają problemy :)

Answer 2

Miałem podobny problem z pułapki i z aktualizacją siatki. Nieco inny tor, ale ...

Oto co mi pomogło. To jest , a nie w main documentation.

Na Neat GitHub page zespół thoughtbot wyjaśnia:

1. Musisz utworzyć plik _grid-settings.scss

2. importowanie go tuż przed importem Neat

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

3. W ustawienia _grid.Plik SCSS, import schludny-pomocnicy

   @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 
   

Przed dodaniem tej konfiguracji, mogę zobaczyć siatkę, ale siatka nie odpowie na moje prośby punktu przerwania zaktualizować kolumny lub zmian komponentu. Kiedy już miałem te ustawienia, sieć działała zgodnie z oczekiwaniami.

Używam CodeKit 2, jeśli to ma znaczenie.

Answer 3

Dla każdego, kogo to dotyczyło, nie chodziło o to, że miałem niewłaściwą kolejność importu, ale o to, w jaki sposób korzystałem z moich zmiennych. Myślałem, że funkcja miała ciąg ...

Tak jest źle:

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

ta jest poprawna:

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