SCSS变量列表可以继承吗?

Question

我有一些在mixins中使用的SCSS变量列表，我可以创建一个其他人继承的'主'列表吗?

$vars: (
main-colour-active: #0b8579,
text: #424242,
button-text: $white,
font-family: $font-family-base,
);

$nav: (
inherit $vars,
background-color: $blue,
);

预期结果

$nav: (
main-colour-active: #0b8579,
text: #424242,
button-text: $white,
font-family: $font-family-base,
background-color: $blue,
);

我已经研究了scss继承，我知道我可以将这些$vars添加到我的$nav中的变量中，但我更希望它们都在一个列表中。

Answer 1

您可以使用map.merge():

@use 'sass:map';
$nav-new: map.merge($vars, $nav);

或:

$nav: map.merge(
$vars,
(
// ...
)
);

试一试:

@use 'sass:map';
$vars: (
text: #424242
);
$nav: (
text: #fff
);
$nav-new: map.merge($vars, $nav);
#foo {
color: map.get($nav-new, text);
}

…编译:

#foo {
color: #fff;
}

Answer 2

您可以使用map-merge也可以获得地图的索引号

$colors1: (
primary:      red,
secondary:    blue,
accent:       #ddd,
);
$colors2: (
black:        #000,
white:        #fff
);

// you can use it like this =>
$colorsGenerated1: map-merge($colors1, $colors2);
@each $key, $value in $colorsGenerated1{
$i: index($colorsGenerated1, $key $value);

.test1 {
margin: #{$i}rem;
background-color: $value;
}
}

// also you can use it like this =>
$colorsGenerated2: map-merge($colorsGenerated1, (
pink:        pink,
purble:        purble
));
@each $key, $value in $colorsGenerated1{
$i: index($colorsGenerated2, $key $value);

.test2 {
margin: #{$i}rem;
background-color: $value;
}
}