Can't use variables for custom property names in @each loops

[spaceninja]

I'm trying to set up an each loop to render a list of layers as custom properties that we'll use for z-index values in our pattern library. However, I can't find a way to get the layer variable to render as a custom property name.

Here's a test case:

$layers: alpha, beta, gamma, delta;

:root {
  @each $layer $i in $layers {
    --#{$layer}: $i;
  }
}

.beta {
  z-index: var(--beta);
}

[yangshun]

You might want to check out https://github.com/outpunk/postcss-each which works for me (although the syntax is a little different).

So far my experience with this plugin has been quite buggy. The examples in the README don't work.