Breakpoints mit Bourbon ordentlich Gitter

Question

Ich versuche, ordentlich für Bourbon zu verwenden, und ich habe die meisten Dinge aussortiert, aber ich treffe einige Straßenblockaden, wenn es darum geht, die Bruchstellen zu schaffen.

Ich bevorzuge separate Sass-Dateien für Handy, Tablet, Desktop & larydesktop und ich benutze normalerweise keine Blasenbildung, um meine Medienabfragen zu erstellen, da ich nicht mag, wie es nicht nur eine Medienabfrage erstellt, macht es Töne durch die CSS-Datei. Aber bis jetzt kann ich nur Dokumentation über eine sprudelnde Methode finden. Hier

Article on how to use breakpoints in neat

ist das, was ich getan habe:

$largedesktop-size:em(1050); 

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


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

ich auch dies versucht haben, die die bg Farbe nicht aktualisiert, aber nicht das visuelle Raster aktualisiert:

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

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

Answer 1

Ich habe das wirklich herausgefunden, mein Hauptproblem war nur, wie ich meine .scss-Dateien organisiert hatte, aber hier ist wie.

Dateistruktur wie folgt aus:

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

@import 'base'; 

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

Variablen vor dem Import Variablen gehen müssen.

in _variables.scss fügen Sie Ihre Anfragen wie so:

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

Dann ist (dies ist, wie Ich mag organisieren Dinge) eine SCSS Datei für Mobiltelefon, Tablet, Desktop-& largedesktop und Import nach _base.scss erstellen - Ich habe oben erläutert, wie die Dateien strukturiert sein sollten.

In jedem fügen Sie Ihre Medienabfrage zusammen mit den erforderlichen Layoutänderungen hinzu.

wie folgt aus: _mobile.scss

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

die für Sie arbeiten sollten.

Wie gesagt das ist, wie ich es tat, ich bin sicher, es gibt viele andere, aber ich wollte die Menschen wissen, einen Weg lassen, wenn sie Probleme haben :)

Answer 2

Ich hatte ein ähnliches Problem mit den Haltepunkten und mit dem Aktualisieren des Rasters. Etwas andere Spur, obwohl ...

Hier ist was mir geholfen hat. Dies ist nicht in der.

Auf den Ordentlich GitHub page, das thoughtbot Team erklärt:

1. Sie benötigen eine _grid-settings.scss Datei es richtig

2. Import zu erstellen, bevor Ordentlich

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

3. Import In die _grid-Einstellungen.SCSS Datei, Import ordentlich-Helfer

   @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 
   

Vor diesem Setup auf dem Hinzufügen, kann ich sehen das Netz, aber das Gitter würde meine Unterbrechungsanforderungen nicht reagieren Spalten oder Änderungskomponente Position zu aktualisieren. Sobald diese Einstellungen vorhanden waren, funktionierte das Raster wie erwartet.

Ich verwende CodeKit 2, wenn das wichtig ist.

Answer 3

Für wen auch immer es sich handeln mag, mein Problem war nicht, dass ich die falsche Reihenfolge der Importe hatte, sondern wie ich meine Variablen verwendet habe. Ich dachte, die Funktion einen String nahm ...

Das ist falsch:

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

Das ist richtig:

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