基础SASS答案 - 爱码网

【问题标题】：Foundation SASS基础SASS
【发布时间】：2016-02-23 21:29:44
【问题描述】：

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

由于某种原因，结果如下：

网格问题

【问题讨论】：

能把html源也发一下吗？

标签： css sass zurb-foundation

【解决方案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。

【讨论】：

太棒了！非常感谢！希望他们在文档中更清楚地说明这一点。

【解决方案2】：

使用在 ruby.config 中需要“zurb-foundation”

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

【讨论】：