Exporting SCSS Variables to JS (auto looping variables)

user_1046010 0
Viewed 23876

UPDATE: If you plan to implement the export solution, you must place it in a separate file to prevent redundant exports in your compiled CSS code. See here.

I recently learned that you can export styles from SCSS into JS like so:

_variables.scss

:export {
    some-variable: 'some-value';
}

app.js

import styles from 'core-styles/brand/_variables.scss';

Based on this, my _variables.scss is formatted like so:

/* Define all colours */
$some-color:       #000;
$another-color:    #000;

// Export the color palette to make it accessible to JS
:export {
    some-color: $some-color;
    another-color: $another-color;
}

The issue with the above format is that I have to re-define each of my variables within export. Therefore, I am interested to know whether there is a way to loop though each of my variables automatically and export them to JS?

sass javascript
3 Answers

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

Side note: I prefer using quotes inside Sass Maps, but you can omit them.

user_98187040

Taking a Cue from Bootstrap 4, you could combine a SASS map with a loop like below;

/* Define all colours */
$theme-colours: (
  some-color: #000,
  another-color: #000,
  third-color: #000,
  fourth-color: #000
)

@each $color, $value in $theme-colours {
  :export{
    $color: $value;
  }
}

Here's some examples from the Bootstrap 4 Docs

user_53127310

You can try using SCSS map example here 

$defalutColor:#000; // your default color
$colors: ( headingColor: #6446ff, preragraphColor: #1b1b1b, linkColor: #1dc506); //decleared color function
@function color($value:$defalutColor) {
    @if map-has-key($colors, $value) {
        @return map-get($colors, $value);
    }
    @return $defalutColor; //when not decleared color then the return default color
}

Use below command for use color function here

element {
    color: color(linkColor); //call the function for set color
//Or
    color: color(); // when blank call then the give function default color it's predefined
}

You can learn about SCSS Maps here link: https://sass-lang.com/documentation/values/maps

user_84777920
Related