Stylus: Creating mixins with loop results in “override” issue?

问题

I have the following JSON-file:

{
  "Primary": {
    "mixin": "primary",
    "color": "red"
  },
  "Secondary": {
    "mixin": "secondary",
    "color": "blue"
  }
}

...that I want to parse and dynamically create mixins off of it.

Inspired by https://stackoverflow.com/a/35127312/2000741 I tried the following:

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

for entry in colors
  mixin = scale[entry]["mixin"]
  value = scale[entry]["color"]

  // FIXME: Hack to cast mixin-name to string -> is there a better way?
  define("" + mixin, @() {
    color value
  })

This code compiles fine, but when I try to use the generated mixins, e.g. like this:

.text
  display block
  secondary()
  primary()

The compiled CSS looks like this:

.text {
    display: block;
    color: #00f;
}

...with all text being blue instead of red.

It seems like the code is either not generating all mixins (even though I confirmed that it runs through every entry of the JSON in the loop) or overrides them in each iteration. At least every mixin - except the last one - seems to get lost here...

I'm not really sure how to keep debugging here. Any ideas?

PS: I'm using "stylus": "^0.54.7" in my package.json.

来源：https://stackoverflow.com/questions/61571888/stylus-creating-mixins-with-loop-results-in-override-issue

标签

css