遍历 Stylus 中的嵌套对象

Question

我有一个符合我的触控笔并传入一些数据的构建脚本。

stylus(stylFile)
  .set('filename', 'index.css')
  .define('data', require('./data.json'))
  .render(...)

data.json文件包含一个组对象，每个组由多个表示项目的对象组成。

{
  "group1": {
    "item1": {
      "width": 1
    },
    "item2": {
      "width": 2
    }
  },
  "group2": {
    "item3": {
      "width": 3
    }
  }
}

在我的 Stylus 文件中，我想遍历组，然后像这样遍历它们的项目

for group, items in data
  #{group}
    for id, item in items
      #{id}
        width item.width

我希望它的输出是

#group1 #item1 {
  width: 1;
}
#group1 #item2 {
  width: 2;
}
#group2 #item3 {
  width: 3;
}

相反，我得到

ParseError: index.css:118:1
   114|   #{group}
   115|     for id, item in items
   116|       #{id}
   117|         width item.width
   118| 
--------^

expected "indent", got "outdent"

Answer 1

我不知道你如何在手写笔中获得 json 但使用 哈希对象 你可以这样做：

手写笔

data={
  "group1": {
    "item1": {
      "width": 1
    },
    "item2": {
      "width": 2
    }
  },
  "group2": {
    "item3": {
      "width": 3
    }
  }
}

for group in data
  #{group}
    items = data[group]
    for item in items
      #{item}
        for property, value in items[item]
          {property} value

输出

#group1 #item1 {
  width: 1;
}
#group1 #item2 {
  width: 2;
}
#group2 #item3 {
  width: 3;
}

更新

您可以从手写笔文件中获取 json 并在 哈希对象中进行转换:

data = json('data.json', { hash: true })

for group in data
  #{group}
    items = data[group]
    for item in items
      #{item}
        for property, value in items[item]
          {property} value

遍历 Stylus 中的嵌套对象

Iterating over nested objects in Stylus

javascript

css

json

stylus

node.js