punti di interruzione utilizzando griglia netta bourbon

Question

Sto cercando di usare pulito per bourbon e ho risolto la maggior parte delle cose, ma sto colpendo alcuni blocchi stradali quando si tratta di creare i punti di rottura.

Preferisco creare file sass separati per cellulare, tablet, desktop & largedesktop e di solito non utilizzo il bubbling per creare le mie query multimediali poiché non mi piace come non crei solo una query multimediale che emette toni attraverso il file css. Ma finora posso solo trovare la documentazione su un metodo spumeggiante.

Article on how to use breakpoints in neat

Ecco quello che ho fatto:

$largedesktop-size:em(1050); 

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


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

ho anche provato, che fa aggiornare il colore bg ma non aggiorna la griglia visiva:

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

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

Answer 1

In realtà ho capito questo, il mio problema principale era solo come avevo organizzato i miei file .scss, ma ecco come.

Struttura del file in questo modo:

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

@import 'base'; 

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

variabili devono andare prima di importare le variabili.

in _variables.scss aggiungere le vostre domande in questo modo:

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

Quindi (questo è il modo che mi piace organizzare le cose) creare un file SCSS per cellulari, tablet, computer & largedesktop e l'importazione dopo _base.scss - Ho illustrato sopra come dovrebbero essere strutturati i file.

All'interno di ciascuna aggiungi la query multimediale insieme alle modifiche al layout necessarie.

come questo: _mobile.scss

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

che dovrebbe funzionare per voi.

Come ho detto, questo è come ho fatto, sono sicuro che ci sono molti altri, ma volevo far sapere in un modo se stanno avendo problemi :)

Answer 2

Ho avuto un problema simile con i punti di interruzione e con l'aggiornamento della griglia. Una traccia leggermente diversa, anche se ...

Ecco cosa mi ha aiutato. Questo è non nello main documentation.

Sul Neat GitHub page, la squadra thoughtbot spiega:

1. È necessario creare un file _grid-settings.scss

2. importazione nel modo giusto prima di importare Neat

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

3. In le _grid-settings.file di SCSS, import-ordinata aiutanti

   @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 
   

Prima di aggiungere questa configurazione, ho potuto vedere la griglia, ma la griglia non rispondere alle mie richieste punto di interruzione per aggiornare le colonne o posizione del componente cambiamento. Una volta impostate queste impostazioni, la griglia ha funzionato come previsto.

Sto usando CodeKit 2, se questo è importante.

Answer 3

A chiunque possa interessare, il mio problema non era che avevo l'ordine errato delle importazioni, ma come usavo le mie variabili. Ho pensato che la funzione ha preso una stringa ...

Questo è sbagliato:

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

Questo è corretto:

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