Exporting SCSS Variables to JS (auto looping variables)

Some improvements to the accepted answer:

• Use camelCase so you will be able to individually export a variable.

• Set the @each directive outside so it won’t generate a new :export at-rule for each variable.

_variables.scss

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

app.js

import styles from './core-styles/brand/_variables.scss' // { anotherColor: "#FFF", someColor: "#000" }
import { someColor } from './core-styles/brand/_variables.scss' // #000

Note: I tend to include quotes within Sass Maps, but you can omit them.