Question

使用Foundation 5并通过SCSS编写语义网格/列标记。为简单起见，我将每个WordPress页面分成div[role="page/index/404/single"]，然后将@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变量（基础5）

1 个答案: