@include (Foundation 5)中的SCSS变量

Question

使用foundation5并通过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/