@include中的SCSS变量（Foundation 5）

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

我已经设计了一个简单的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"

如果这个问题不能得到解决，让我知道。在我的代码中为每个站点手动定义整数会很痛苦，但如果必须的话，我会处理它。

来源

2015-10-14 Alexander Graham

您需要使用以下语法才能访问您的Sass数组（您在技术上使用Sass地图）。

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

来源

2015-10-14 17:47:26 kretzm

它分析我的整数，但抛出了同样的错误：'（第32行：$号： “9/12” 是不是为 “百分比” 无量纲数）'。然而，这些信息帮助我理解了sass地图:) –

嗯，看起来像Sass地图中的值是一种字符串，函数需要一种数字。如果您可以找到一种方法将其转换为数字类型，则可以解决此问题。另一个解决方案是不使用Sass地图，只使用变量。防爆。 '$文章：9;' 然后用 '@包括格列（$条）;' – kretzm

这就是我最终决定这样做，但我很失望，我不能让发烧友并使用一个SCSS变量数组... :)哦。 –

@include中的SCSS变量（Foundation 5）

回答

相关问题