Get a variable name as a string

Question

I have a class with the name .text-black, I also have a map with some values.

$black: #000;

map:
  dark: $black;

I want to loop through this map and create a new class with the $key and then extend they new class with using the value text-black.

There are 2 problems I have. The first I think I have solved, if I can get the $value as $black instead of #000. Then I can remove the $ using string replacement.

The second challenge however is proving a headache for me. I need to get $black in stead of #000.

Here is my code showing my approach so far.

// String Replacement to remove '$' from varaible name.
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
  }
  @return $string;
}


// get color from map
@function text-color($key: "weekly-digest") {
    @return map-get($text-colors, $key);
}

$black: #000000;

// map text-colors
$text-colors: () !default;
$text-colors: map-merge(
  (
    "news":         $black,
  ),
  $text-colors
);

// Extendable classes.
.text-black{
  color: $black;
}


// Loop function
@each $name, $value in $text-colors {
    &--#{$name} {
      background-color: $value;

      @extend .text-#{$value}  // This should return '.text-black' not '.text-#000000'
    }
}

Answer 1

I try to give you 3 different solutions. In all these solutions I used 2 colors (black & red) only to see if they could work in combination:

1. Using a function str-split() (maybe the most intricated, but use your code)

I found a magical function that splits a string in 2 elements How to split a string into two lists of numbers in SASS?.

So my idea is to use that function (thanks to @dayenite: if you like this solution, please upvote him ;)) in a string using a character (in my example "_") to split your maps in 3 different value (something like 2 keys and 1 value): 1. "news" 2. "black" 3. "#000"

Your map could become something like this:

$text-colors: map-merge(
  (
    "news_black":$black,
    "info_red":  $red
  ),
  $text-colors
);

This is all the code in action:

@function str-split($string, $separator) {
    // empty array/list
    $split-arr: ();
    // first index of separator in string
    $index : str-index($string, $separator);
    // loop through string
    @while $index != null {
        // get the substring from the first character to the separator
        $item: str-slice($string, 1, $index - 1);
        // push item to array
        $split-arr: append($split-arr, $item);
        // remove item and separator from string
        $string: str-slice($string, $index + 1);
        // find new index of separator
        $index : str-index($string, $separator);
    }
    // add the remaining string to list (the last item)
    $split-arr: append($split-arr, $string);

    @return $split-arr;
}


/* Example with 2 colors */
$black: #000000;
$red: #ff0000;

$text-colors: () !default;
$text-colors: map-merge(
  (
    "news_black":$black,
    "info_red":  $red //my add
  ),
  $text-colors
);

// Extendable classes.

.text-black{
  color: $black;
}

.text-red{
  color: $red;
}

// Loop function

.my-div{
  @each $name, $value in $text-colors {
    $list: (); // Create every time an empty list with my 2 argoments, for example "news" and "black"
    $split-values: str-split($name, "_"); //use the function to split the string

    @each $valore in $split-values {
      $list: append($list, str-split($valore, " "));
    }
    //set here the first part of the string (i.e. news/info)
    &--#{nth($list, 1)} {
      background-color: $value;
      @extend .text-#{nth($list, 2)}  // set here the second part: black/red
    }
  }
}

https://www.sassmeister.com/gist/08f699dba4436d3bae6a4d8b666e815b

2. Using a nested list

This time I created a simple nested list with 3 value ("news", "black", $black), the result is the same.

$black: #000000;
$red: #ff0000;

// list text-colors
$text-colors: (
    ( "news", "black",  $black ),
    ( "info", "red",  $red )
);

// Extendable classes.
.text-black{
  color: $black;
}

.text-red{
  color: $red;
}

.mydiv{
// Loop function
  @each $item in $text-colors {
      &--#{nth($item, 1)} {
        background-color: nth($item, 3);

        @extend .text-#{nth($item, 2)}
      }
  }
}

https://www.sassmeister.com/gist/59adf5ee60ea46dd7a24e94d7db91d85

3. Using a nested map

Here I use nested maps, but the structure is different from yours and I don't know if it's ok for you.

$black: #000000;
$red: #ff0000;

// map text-colors
$text-colors: (
    news:(black: $black),
    info:(red: $red)
);

.text-black{
  color: $black;
}

.text-red{
  color: $red;
}

.mydiv{
// Loop function
  @each $name, $value in $text-colors {

    &--#{$name} {
      @each $name-color, $value-color in $value {
        background-color: $value-color;
        @extend .text-#{$name-color}
      }
    }
  }
}

https://www.sassmeister.com/gist/8ddec08755befc84f6e4846fbc625130

Well, I haven't another ideas. I hope at least one way could help you to solve your problem.

Cheers :)