SCSS变量列表能否实现继承？如何创建可继承的主列表

要实现将主变量映射的内容合并到新映射中（而非嵌套），SCSS提供了map-merge()函数来完成这个需求，你尝试的inherit写法并不是SCSS的合法语法。

实现步骤 #

1. 定义主变量映射及依赖的基础变量：

$white: #ffffff;
$font-family-base: sans-serif;
$blue: #2196f3;

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

2. 使用map-merge()合并主映射与新的键值对：

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

效果验证 #

最终$nav的结构完全符合你的期望：

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

额外说明 #

• 如果新映射中存在与主映射同名的键，map-merge()会用新映射的键值对覆盖主映射的对应内容，例如：

  $nav: map-merge($vars, (
    text: #ff0000, // 覆盖主映射中的text值
    background-color: $blue,
  ));
  

  此时$nav里的text值会变成#ff0000。

内容的提问来源于stack exchange，提问作者Peter Collins