Exporting SCSS Variables to JS (auto looping variables)

Question

UPDATE: If you plan to implement the export solution, you must place it in a separate file to prevent redundant e

Answer 1

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