@include 中的 SCSS 变量（Foundation 5）

Question

使用 Foundation 5 并通过 SCSS 编写语义网格/列标记。为了简单起见，我用 div[role="page/index/404/single"] 划分了每个 WordPress 页面，并将 @include grid-row() 和 @include grid-column() 附加到相应的语义 HTML 标记。

我设计了一个简单的 SCSS 数组来一次性处理我的变量，但我遇到了解析问题。

$columns: ( 'article': 9, 'aside': 3, 'full-width': 12, 'none': 0 );

// index.php
div[role="index"] {
    // row
    main {
        @include grid-row();
        // column
        article {
            @include grid-column(columns('article'));
        }
        // sidebar
        aside {
            @include grid-column(columns('aside'));
        }
    }
}

我收到这个错误，我完全理解，但是我怎样才能让它工作？？？我没主意了。

column("article")/12 is not a unitless number for "percentage"

如果这个问题无法解决请告诉我。在我的代码中为每个站点手动定义整数会很痛苦，但如果必须的话，我会处理它。

Answer 1

您需要使用以下语法来访问您的 Sass 数组（从技术上讲，您使用的是 Sass 映射）。

@include grid-column(#{map-get($columns, 'article')});
@include grid-column(#{map-get($columns, 'aside')});

更多信息：http://www.sitepoint.com/using-sass-maps/

@include 中的 SCSS 变量（Foundation 5）

SCSS variable within @include (Foundation 5)

wordpress

sass

zurb-foundation

mixins

zurb-foundation-5