SASS-通过map_merge传递贴图会产生相似的外观,但不是等效的贴图
我正在尝试编写一个函数来动态地将一些变换应用到之前定义的角度材质主题的颜色贴图。问题在于,函数产生的结果在某种程度上是错误的 我已经通过调试日志打印了结果,它看起来与原始贴图完全一样,但无法通过键进行比较,如果我尝试将其提供给angular material函数,则会导致错误 这里是这个问题的一个简化演示——你可以看到SASS-通过map_merge传递贴图会产生相似的外观,但不是等效的贴图,sass,sass-maps,angular-material-theming,Sass,Sass Maps,Angular Material Theming,我正在尝试编写一个函数来动态地将一些变换应用到之前定义的角度材质主题的颜色贴图。问题在于,函数产生的结果在某种程度上是错误的 我已经通过调试日志打印了结果,它看起来与原始贴图完全一样,但无法通过键进行比较,如果我尝试将其提供给angular material函数,则会导致错误 这里是这个问题的一个简化演示——你可以看到 $eenie和$meenie是等效的 函数($miney和$mo)的结果也是等效的 通过调试,所有4个看起来都相同 我需要在函数内部完成的是,在经过map\u merge之后
和$eenie
是等效的$meenie
- 函数(
和$miney
)的结果也是等效的$mo
- 通过调试,所有4个看起来都相同
map\u merge
之后,使$eenie
等效于$miney
我怀疑,可能是因为密钥看起来是一个数字,所以它存在某种数据类型危机,但我对SASS了解不够,无法确定是否存在这种情况,或者如何避免这种情况。我尝试过使用引号,但对于角度材质函数来说,这似乎不是一个可接受的输入,因此我需要它精确匹配$eenie
@function merge-things($base-palette){
$result: ();
@each $hue, $color in $base-palette {
$result: map_merge($result, (#{$hue}: $color));
}
@return $result;
}
$eenie: (
50: green,
contrast: (
50: white,
),
);
$meenie: (
50: green,
contrast: (
50: white,
),
);
$miney: merge-things($eenie);
$mo: merge-things($miney);
@debug $eenie; // DEBUG: (50: green, contrast: (50: white))
@debug $meenie; // DEBUG: (50: green, contrast: (50: white))
@debug $miney; // DEBUG: (50: green, contrast: (50: white))
@debug $mo; // DEBUG: (50: green, contrast: (50: white))
@debug 'eenie-meenie #{map-keys($eenie) == map-keys($meenie)}'; // DEBUG: eenie-meenie true
@debug 'eenie-miney #{map-keys($eenie) == map-keys($miney)}'; // DEBUG: eenie-miney false
@debug 'miney-mo #{map-keys($miney) == map-keys($mo)}'; // DEBUG: miney-mo true
当使用地图中的数字键执行插值时,
merge things
函数会更改键的类型
@use "sass:map";
$result: map-merge($result, (#{$hue}: $color));
下面的练习显示,插值数字
类型会将其转换为字符串
类型
@use "sass:meta";
$k: 1;
@debug meta.type-of(#{$k}); // string
@debug meta.type-of($k); // number
在构建新地图时,保持关键点不变
- $result: map-merge($result, (#{$hue}: $color));
+ $result: map-merge($result, ($hue: $color));
当使用地图中的数字键执行插值时,
merge things
函数会更改键的类型
@use "sass:map";
$result: map-merge($result, (#{$hue}: $color));
下面的练习显示,插值数字
类型会将其转换为字符串
类型
@use "sass:meta";
$k: 1;
@debug meta.type-of(#{$k}); // string
@debug meta.type-of($k); // number
在构建新地图时,保持关键点不变
- $result: map-merge($result, (#{$hue}: $color));
+ $result: map-merge($result, ($hue: $color));
@debug$mo
不应该是(50:绿色,对比度:(50:白色))
,因为它可以切换$miney
的颜色吗?或者你能澄清转换在地图上的作用吗?@OluwafemiSule在本例中,转换没有任何作用。我把调试消息粘贴得一团糟,它们都应该说绿色,对比度白色,这不是@debug$mo
应该是(50:绿色,对比度:(50:白色))
,因为它会切换$miney
的颜色吗?或者你能澄清转换在地图上的作用吗?@OluwafemiSule在本例中,转换没有任何作用。我把调试消息粘贴得一团糟,它们都应该是绿色,对比度为白色。地图合并定义在哪里?@gyozokudor这是个打字错误。您需要的功能是。您可以使用@use“sass:map”
将其导入您的sass文件中。嗨,map\u merge定义在哪里?@gyozokudor,这是一个打字错误。您需要的功能是。您可以使用@使用“sass:map”