以字符串形式获取变量名

Question

我有一个名为.text-black的类，我还有一个带有一些值的映射。

$black: #000;

map:
  dark: $black;

我想遍历这个映射并使用$key创建一个新类，然后使用值text-black扩展它们的新类。

我有两个问题。我想我已经解决了第一个问题，如果我可以将$value作为$black而不是#000.，那么我就可以使用字符串替换来删除$。

然而，第二个挑战令我头疼。我需要用$black代替#000。

下面是我的代码，展示了我到目前为止的方法。

// 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

我试着给你三种不同的解决方案。在所有这些解决方案中，我使用了两种颜色(黑色和红色)，只是为了看看它们是否可以组合在一起：

使用函数str-()(可能是最复杂的，但请使用您的代码)

我发现了一个神奇的函数，它可以将字符串拆分成两个元素How to split a string into two lists of numbers in SASS?。

所以我的想法是在字符串中使用该函数(感谢@dayenite：如果您喜欢这个解决方案，请给他加票；)，并使用一个字符(在我的示例中为"_")将您的地图分割为3个不同的值(类似于2个键和1个值)：1. “” 2. “” 3. "#000"

你的地图可能会变成这样：

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

这是运行中的所有代码：

@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.使用嵌套列表

这次我创建了一个带有3个值("news"，"black"，$black)的简单嵌套列表，结果是相同的。

$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.使用嵌套地图

这里我使用了嵌套的map，但是它的结构与你的不同，我不知道它是否适合你。

$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

好吧，我没有别的主意了。我希望至少有一种方法可以帮助你解决你的问题。

干杯:)