基金会 SASS

Question

我正在试用新的 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);
    }
}

出于某种原因，结果是这样的：

网格问题

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 Styles，您可能运行会遇到更少的障碍，因为它们主要是一堆用于提高浏览器一致性的重置。

注意： 我删除了我的另一个答案，因为这个答案指出了问题的根源 CSS。

Answer 2

使用在 ruby.config

中需要 'zurb-foundation'

参考http://foundation.zurb.com/sites/docs/sass-functions.html http://foundation.zurb.com/sites/docs/sass-mixins.html

基金会 SASS

Foundation SASS

css

sass

zurb-foundation