Not compatible with postcss-each like `@each $name, $color in (danger, primary), (red, blue)`

[Grawl]

Trying to use postcss-simple-vars before postcss-each and get an error:

Undefined variable

```sh ~/Р/postcss-playground $ npm run postcss:watch > @ postcss:watch /Users/grawl/Разработчик/postcss-playground > npm run postcss -- --watch > @ postcss /Users/grawl/Разработчик/postcss-playground > postcss --config postcss.json "--watch" postcss-simple-vars: /Users/grawl/Разработчик/postcss-playground/style.sss:3:3: Undefined variable $name 1 | $colors: (good, bad, purple), (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple) 2 | .item > 3 | @each $name, $color in $colors | ^ 4 | &-$(name) 5 | color: $color npm ERR! Darwin 16.3.0 npm ERR! argv "/usr/local/Cellar/node/7.0.0/bin/node" "/usr/local/bin/npm" "run" "postcss" "--" "--watch" npm ERR! node v7.0.0 npm ERR! npm v3.10.9 npm ERR! code ELIFECYCLE npm ERR! @ postcss: `postcss --config postcss.json "--watch"` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ postcss script 'postcss --config postcss.json "--watch"'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! postcss --config postcss.json "--watch" npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /Users/grawl/Разработчик/postcss-playground/npm-debug.log npm ERR! Darwin 16.3.0 npm ERR! argv "/usr/local/Cellar/node/7.0.0/bin/node" "/usr/local/bin/npm" "run" "postcss:watch" npm ERR! node v7.0.0 npm ERR! npm v3.10.9 npm ERR! code ELIFECYCLE npm ERR! @ postcss:watch: `npm run postcss -- --watch` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ postcss:watch script 'npm run postcss -- --watch'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! npm run postcss -- --watch npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /Users/grawl/Разработчик/postcss-playground/npm-debug.log ~/Р/postcss-playground $ ```

This is how I do this: `style.sss` ```sass $colors: (good, bad, purple), (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple) .item @each $name, $color in $colors &-$(name) color: $color ``` The same with flat array like ```sass $colors: (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple) ``` & `@each $color in $colors`. `postcss.json` ```json { "input": "style.sss", "output": "style.css", "parser": "sugarss", "use": [ "postcss-devtools", "postcss-simple-vars", "postcss-each", "autoprefixer" ], "local-plugins": true } ``` `package.json` ```json { "private": true, "scripts": { "postcss": "postcss --config postcss.json", "postcss:watch": "npm run postcss -- --watch" }, "devDependencies": { "autoprefixer": "^6.5.1", "postcss-cli": "^2.6.0", "postcss-devtools": "^1.1.0", "postcss-each": "^0.9.3", "postcss-simple-vars": "^3.0.0", "sugarss": "^0.2.0" } } ``` Also this issue referenced here: https://github.com/outpunk/postcss-each/issues/14#issuecomment-261951230 With [`postcss-at-rules-variables`](https://github.com/GitScrum/postcss-at-rules-variables), it works as expected: ```sass :root --colors-names: (good, bad, purple) --color-values: (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple) .item @each $name, $color in var(--colors-names), var(--color-values) &-$name color: $color ```

[ai]

postcss-each doesn't support arrays

[ai]

I think using @each is too tricky in this case. Mixins will be simpler:

@define-mixin color $name, $color
  &-$(name)
      color: $color

@mixin color good hsl(95, 63%, 46%)
@mixin color bad hsl(6, 63%, 46%)
@mixin color purple purple

With mixins it is easy to understand what name use that color. And you don’t need to be a programmer to understand final CSS

[Grawl]

I think not. Everyone can understand this Sass:

$colors: (good: hsl(95, 63%, 46%), bad: hsl(6, 63%, 46%), purple: purple)
.item
  @each $name, $color in $colors
    &-#{$name}
      color: $color

Don't?

[ai]

If need to understand key-value maps for it :).

Of course, many developers could do it.

But when I imagine PreCSS, I thought about make a real simple language to protect CSS from tricky programming thins.

In this case you do too DRY. This source is much readable:

&.is-bad
   color: hsl(95, 63%, 46%)

[ai]

Of course “no programming in CSS” is goal for PreCSS and postcss-simple-vars you can create any complicated system of top of PostCSS. Or just use Sass if you don’t share my worries about unreadable CSS.

But I think that good CSS is not about DRY. It is about isolation and components.

[Grawl]

Oh okay, so Sass will be my friend for sources and PostCSS will be for post-processing only. Sad.

[ai]

@Grawl why you don’t want to remove code from your CSS sources too? Look at CSS Modules or cssnext — they both suggest to forget making a programs inside a sources. It is a current trend.

[Grawl]

@ai it's a huge step for all my work. And I don't like KISS methodology at all. I like DRY and tabs for indentation, and don't limit line length.