我有一个名为.text-black的类，也有一个带有一些值的映射。
$black: #000;
map:
dark: $black;
我想遍历此映射并使用$key创建一个新类，然后使用值text-black扩展它们为新类。
我有2个问题。我想我已经解决了第一个问题，如果我可以将$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'
}
}
答案 0 :(得分：2)
我尝试为您提供3种不同的解决方案。在所有这些解决方案中，我仅使用两种颜色（黑色和红色）来查看它们是否可以组合使用：
我发现了 magical 函数，该函数将字符串拆分为两个元素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
这次，我创建了一个简单的嵌套列表，其中包含3个值（“新闻”，“黑色”，$ 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
我在这里使用嵌套地图，但是结构与您的不同，我不知道您是否适合。
$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
嗯，我没有其他想法了。我希望至少有一种方法可以帮助您解决问题。
干杯：）