Pass variables from CSS to JS

I know two ways of achievening this:

¶ Sass

If you use Sass and webpack in your project use :export declaration.

// in sass/_variables.scss

$color-primary: blue;
$color-secondary: red;

:export {
    colorPrimary: $color-primary;
    colorSecondary: $color-secondary;
}

import { colorPrimary } from "../sass/_variables.scss";

Good advice from SO and Bootstrap to avoid repetition is to leverage Sass map:

$theme-colours: (
            someColor: #000,
            anotherColor: #000,
            thirdColor: #000,
            fourthColor: #000,
        )
        @each $color, $value in $theme-colours {
    :export {
        $color: $value;
    }
}

Note that if your Sass variables use dash separators (ie. some-color) and are exported with the same name you won't be able to do named exports. Meaning you will end with something like colors['some-color'] in JS.

Update: Actually, Sass is not needed for this to work. It relies on a standard called Interoperable CSS so it will work with plain CSS (but still needs JS loader though).

¶ CSS variables

From Bramus. Idea is to define variables as custom properties and fetch them using getComputedStyle.

:root {
    --color-primary: #ff0000;
    --font-size: 16px;
}

function getStyle(style, element = document.body) {
    return window.getComputedStyle(element).getPropertyValue(style).trim();
}

console.log("Primary Color", getStyle("--color-primary"));

console.log("Font Size", getStyle("--font-size"));

Using document.body as element will get you :root variables.