@include 中的 SCSS 变量（基础 5）答案

【问题标题】：SCSS variable within @include (Foundation 5)@include 中的 SCSS 变量（基础 5）
【发布时间】：2016-01-12 17:03:22
【问题描述】：

使用 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"

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

【问题讨论】：

标签： wordpress sass zurb-foundation mixins zurb-foundation-5

【解决方案1】：

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

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

【讨论】：

它解析了我的整数但抛出了同样的错误：(Line 32: $number: "9/12" is not a unitless number for "percentage")。然而，这些信息帮助我理解了 sass 地图 :)
嗯，看起来你的 Sass 映射中的值是一种字符串类型，而函数需要一种数字类型。如果您能找到一种将其转换为数字类型的方法，那将解决它。另一种解决方案是不使用 Sass 映射而只使用变量。前任。 $article: 9; 然后使用@include grid-column($article);
这就是我最终决定要做的事情，但我很失望我不能更喜欢并使用 SCSS 变量数组... :) 哦，好吧。