/ Nadácia SASS - css, sass, zurb-foundation

Nadácia SASS - css, sass, zurb-foundation

Vyskúšam nový rámec nadácie 6,pomocou SASS, ale snažím sa pochopiť systém mriežky Na základe dokumentácie a ďalšieho príkladu som videl, čo som urobil, by mala byť jednoduchá 2,1 mriežka:

    @import "foundation";

/* CUSTOM STYLES */

.container {
@include grid-row(3);
main {
background: $primary-color;
@include grid-column(2);
}
aside {
background: $primary-color;
@include grid-column(1);
}
}

Z nejakého dôvodu to má za následok toto:

Problém siete

Problém siete

odpovede:

0 pre odpoveď č. 1

Tieto dva spôsoby môžete opraviť. Prvým je zahrnutie foundation-global-styles vo svojom hlavnom app.scss súboru. Tu je príklad app.scss file:

@charset "utf-8";

@import "settings";
@import "foundation";

@include foundation-global-styles;

Ak nechcete zahrnúť všetky globálne štýly nadácie, špecifické pravidlo služby CSS, ktoré opravuje tento problém, je:

*,
*:before,
*:after {
box-sizing: border-box;
}

Toto pravidlo znamená, že všetky prvky zahŕňajú polstrovanie a veľkosti hraníc pri výpočtoch šírky a výšky. Pravdepodobne narazíte na menej prekážok po ceste, ak zahrniete nadácie Globálne štýly pretože sú prevažne bunky obnovení pre zlepšenie konzistencie v prehliadačoch.


Poznámka: Odstránil som svoju ďalšiu odpoveď, pretože táto odpoveď určuje CSS, ktorý je koreňom problému.


0 pre odpoveď č. 2

použitie vyžadovať "zurb-foundation" v ruby.config

odkázať http://foundation.zurb.com/sites/docs/sass-functions.html http://foundation.zurb.com/sites/docs/sass-mixins.html