/ / Come modificare la larghezza massima della riga in Foundation 6 con SASS - zurb-foundation, zurb-foundation-6

Come modificare la larghezza massima della riga in Foundation 6 con SASS - zurb-foundation, zurb-foundation-6

Sto tentando di cambiare la larghezza massima della rigada 1200px a 1560px tuttavia sto avendo problemi a trovare comunque questo, sto usando SASS per compilare. Suppongo che le impostazioni debbano essere modificate nel file settings.scss, tuttavia qualsiasi modifica apportata sembra non avere alcun effetto sulla larghezza delle righe.

Ho visto una variabile di breakpoint qui

$breakpoints: (
small: 0,
medium: 1200px,
large: 1560px,
xlarge: 1440px,
xxlarge: 1440px,
);

Lì ho cambiato grande: da 1200px a 1560px e ho cambiato anche gli altri punti di interruzione.

Ho anche cambiato la larghezza globale di $ qui

$global-width: rem-calc(1560);

Nessuno di questi sembrava aver avuto alcun effetto. Mi sono assicurato che fosse incluso nel mio file main.scss.

@import "vendors/foundation/settings";
@import "base/colors";
@import "base/global";
@import "base/typography";

La mia struttura di cartelle è

-_main.scss
-base
-_colors.scss
-_global.scss
-_typography.scss
-vendors
-foundation
-_settings.scss

Inoltre ho ricontrollato e gli effetti di tutti gli altri file scss stanno funzionando bene. Non sto ottenendo errori.

AGGIORNAMENTO: ho anche assicurato che l'importazione delle impostazioni avvenisse dopo l'inclusione della mia base

@import "../bower_components/foundation-sites/scss/util/util";
@import "../bower_components/foundation-sites/scss/foundation.scss";
@include foundation-global-styles;
@include foundation-grid;

Tutti si verificano prima del resto delle mie importazioni.

Come si modifica la larghezza massima o le righe / punti di interruzione in SASS in Foundation 6

AGGIORNAMENTO: ho aggiunto anche una variabile di prova

$testcolor: #523432;

e usato altrove in base / colori in questo modo

* { border: 1px solid $testcolor;}

E questo funziona bene.

risposte:

1 per risposta № 1

Risulta che ha a che fare con l'ordine che ho importato. Il file _settings.scss deve essere importato prima del file base _foundation.scss.