How to set a distinct variables to each element in a list in sass?

Viewed 18

I created a list for all darken and lighten colors that want to use in my project with the help of sass functions and lists. Here is the code of _functions.scss file:

_functions.scss:

@use "sass:list";
@use "sass:color";
@use "sass:string";
@use "sass:map";

@function themeAllGenerate($themeVar, $changeProp, $per) {
    $returnedTheme: ();
    @for $counter from 1 through list.length($themeVar) { 
        $currentColor: list.nth($themeVar, $counter);
        @if ($changeProp == "lightness") {
            $returnedTheme: list.append($returnedTheme, color.scale($currentColor, $lightness: $per), $separator: comma);
        } @else if ($changeProp == "blackness") {
            $returnedTheme: list.append($returnedTheme, color.scale($currentColor, $blackness: $per), $separator: comma);
        } @else {
            @error "Unknown change props #{$changeProp}!";
        }
    }
    @return $returnedTheme;
}

@function lightDark($themVarConfig, $baseTheme) {
    
    @each $name, $value in $themVarConfig {
        $black-light: "";
        $degree: 17%;

        @if string.index($name, "lighten") {
            $black-light: "lightness";
        } @else {
            $black-light: "blackness";
        }

        @if string.index($name, "2") {
            $degree: 49%;
        }
        $newValue: themeAllGenerate($baseTheme, $black-light, $degree);
        $themVarConfig: map.set($themVarConfig, $name,  $newValue);
    }
    
    @return $themVarConfig;

}

Also here is the code of my _variables.scss file that finally makes the $listThemes variable that contains colors:

_variables.scss:

/* this file is responsible for variables that are used in this project */

@use "functions";
@use "sass:string";
@use "sass:list";

/* color-variables */
/* ----------------------------------- */

/* theme-1 */
/* ----------------------------------- */
$primary-color1: rgb(48, 146, 196);
$secondary-color1: rgb(132, 156, 224);
$text-color1: rgb(201, 249, 136); // this color must have a good contrast with "$back-ground1" color
$background-color1: rgb(3, 58, 32);
$info-color1: rgb(103, 14, 181);
$theme1: ($primary-color1, $secondary-color1, $text-color1, $background-color1, $info-color1);

/* theme-2 */
/* ----------------------------------- */
$primary-color2: rgb(23, 197, 200);
$secondary-color2: rgb(251, 38, 66);
$text-color2: rgb(3, 58, 32); // this color must have a good contrast with "$back-ground1" color
$background-color2: rgb(191, 243, 215);
$info-color2: rgb(99, 4, 56);
$theme2: ($primary-color2, $secondary-color2, $text-color2, $background-color2, $info-color2);

/* building lightness and darkness of colors */
/* ----------------------------------- */
$theme-config-1: ("theme1-lighten-1": null, "theme1-lighten-2": null, "theme1-darken-1": null, "theme1-darken-2": null);

$theme-config-2: ("theme2-lighten-1": null, "theme2-lighten-2": null, "theme2-darken-1": null, "theme2-darken-2": null);

$themes: ($theme1, $theme2);
$listThemes: ($theme-config-1, $theme-config-2);

@for $counterHere from 1 through list.length($listThemes) {
    $outPutTheme: functions.lightDark(list.nth($listThemes, $counterHere), list.nth($themes, $counterHere));
    $listThemes: list.set-nth($listThemes, $counterHere, $outPutTheme);
}

@debug $listThemes;

That works correctly and gives me the colors I want like below:

("theme1-lighten-1": (#4ea6d4, #99ade5, #d2fa9c, #078348, #8312e7), "theme1-lighten-2": (#92c9e4, #c0cdef, #e3fcc2, #25f492, #b36af3), "theme1-darken-1": (#307ca3, #8492ba, #b1cf88, #03301b, #570e96), "theme1-darken-2": (#305264, #7b7b7b, #838383, #031e11, #380e5c)), ("theme2-lighten-1": (#7ceef0, #fd909f, #25f492, #def9eb, #f737a0), "theme2-lighten-2": (#7ceef0, #fd909f, #25f492, #def9eb, #f737a0), "theme2-darken-1": (#176566, #802632, #031e11, #979797, #32041d), "theme2-darken-2": (#176566, #802632, #031e11, #979797, #32041d))

But the problem is that I want to set distinct variables for each color value inside list. For example a code like this one:

$counterLimit: list.length($theme-config-1);
$counterLimit1: list.length($theme1);
@for $counterFinal from 1 through list.length($listThemes) {
    @for $counterFinal2 from 1 through $counterLimit {
        @for $counterFinal3 from 1 through $counterLimit1 {
            @debug list.nth(list.nth( list.nth( list.nth($listThemes, $counterFinal) , $counterFinal2 ) , 2), $counterFinal3);
            /* the above @debug must be something like this:
            -----------------------------------------------------
            $variableDynamicName: list.nth(list.nth( list.nth( list.nth($listThemes, $counterFinal) , $counterFinal2 ) , 2), $counterFinal3);
            -----------------------------------------------------
            where "$variableDynamicName" must be set at each loop iteration to some values like "primary1-lighten1", "secondary1-lighten1", ... "info2-darken2".
            */
        }
    }
}

I don't know how to set variable name dynamically! I don't want that each time I need a color value in my style-sheets, I use a list or map function like list.nth(list.nth(... to obtain the value, I just want to call a variable name like:

h3 {
  color: variables.$secondary1-darken1;
}

Is there any solution for that?

0 Answers
Related