Question

我有一个包含以下内容的JSON文件：

{
"colors": [
    {
        "name": "red",
        "hex": "#c33"
    },
    {
        "name": "blue",
        "hex": "#2f2"
    },
    {
        "name": "green",
        "hex": "#22f"
    }
]

}

JSON需要在数组[]中，因为我也使用相同的JSON来创建Handlebars模板，Handlebars似乎要求JSON像这样（除非有获得Handlebars的方法）不这样做？）。

我使用sass-json-vars将JSON文件导入我的SASS：

@import 'variables.json';

然后我想做的是循环JSON以根据JSON中的值和名称创建SASS变量列表。

到目前为止，我能得到的最接近的是：

@each $id, $val in $colors {

    @each $idB, $valB in $val {
        body {
            color: $idB;
        } 
    }
}

这给了我关键和价值：

body {
    color: #22f;
}

body {
    color: hex;
}

这显然不好。

我无法找到一种方法来使用点符号或类似的东西来引用与键匹配的值，并且像上面的嵌套循环似乎不起作用。

SASS之后的输出类型是：

$red : #c33;
$blue : #2f2;
... etc

有人可以帮忙吗？

Answer 1

如果你使用Sass＆gt; = 3.3，那就像

@function get-color($colors, $name) {
  @each $color in $colors {
    @if map-get($color, name) == $name {
      @return map-get($color, hex);
    }
  }
  @return null;
}

应该做的伎俩。我没有测试过它。

用法：

.cls {
  color: get-color($colors, red);
}

您无法在Sass中以编程方式构造变量名，因此AFAIK无法将您的结构转换为Sass文件中所需的全局变量集。您可以将其转换为地图，然后只使用map-get（如果上述解决方案有效，这应该是一项微不足道的练习）。

将JSON导入Sass并循环遍历数组

1 个答案: