基礎SASS

Question

我正在嘗試使用SASS嘗試新的Foundation 6框架，但是我一直在努力了解網格系統。 根據文檔和其他示例，我已經看到我所做的應該是一個簡單的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);
    }
}

由於某種原因，它導致：

電網問題

Answer 1

您可以通過兩種方式解決此問題。 第一種是在主app.scss文件中包含foundation-global-styles 。 這是一個示例app.scss文件：

@charset 'utf-8';

@import 'settings';
@import 'foundation';

@include foundation-global-styles;

如果您不想包括所有Foundation的全局樣式，則解決此問題的特定CSS規則是：

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

此規則使所有元素在寬度和高度計算中都包括填充和邊框大小。 如果包含Foundation的Global Style，您可能會遇到很多障礙，因為它們大多是一堆重置操作，目的是提高瀏覽器的一致性。

---

注意：我刪除了其他答案，因為此答案指出了問題的根源CSS。

Answer 2

在ruby.config中使用require'zurb-foundation'

請參閱http://foundation.zurb.com/sites/docs/sass-functions.html http://foundation.zurb.com/sites/docs/sass-mixins.html