/ / Фондация SASS - css, sass, zurb-foundation

Фондация SASS - css, sass, zurb-foundation

Изпробвам новата рамка на Фондация 6,използвайки SASS, но се борим да разберем системата на мрежата. Въз основа на документацията и друг пример, "видях какво съм направил трябва да е проста 2,1 мрежа:

    @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);
}
}

По някаква причина това води до следното:

Проблем с мрежата

Проблем с мрежата

Отговори:

0 за отговор № 1

Можете да решите тези два начина. Първият е чрез включване foundation-global-styles във вашето основно app.scss файл. Ето един пример app.scss файл:

@charset "utf-8";

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

@include foundation-global-styles;

Ако не искате да включите всички глобални стилове на Фондацията, конкретното правило за CSS, което решава този проблем, е:

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

Това правило прави всички елементи да включват подложки и размери на границите по изчисления за ширина и височина. Вероятно ще попаднете на по-малко препятствия по пътя, ако включите фондацията Глобални стилове тъй като те са предимно куп от нули за подобряване на последователността в различните браузъри.


Забележка: Изтрих моя друг отговор, тъй като този отговор определя CSS, който е коренът на проблема.


0 за отговор № 2

употреба изискват "zurb-foundation" в ruby.config

се отнасят http://foundation.zurb.com/sites/docs/sass-functions.html http://foundation.zurb.com/sites/docs/sass-mixins.html