Фонд SASS - css, сасс, 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