如何在SCSS中扩展变量的映射？

Question

我正在使用一个名为Buefy的软件包，该软件包是Bulma CSS框架库的Vue.js包装器。 Buefy在其名为type（e.g。，type="is-warning"）的模板组件上放置一个属性/属性。根据Buefy documentation，术语“正在警告”是根据SCSS中设置的$colors变量预先定义的：

所以我跟随these instructions from Buefy能够自定义$colors映射，但是我想做的是将这些指令中定义的初始SCSS保留在单个base.scss文件中，然后进行扩展和我自己的自定义SCSS文件。

所以我的问题是，如何用自己的名称和值扩展$colors中的base.scss映射？

这是base.scss中的片段，其中定义了$colors映射：

$colors: (
  "white": ($white, $black),
  "black": ($black, $white),
  "light": ($light, $light-invert),
  "dark": ($dark, $dark-invert),
  "primary": ($primary, $primary-invert),
  "info": ($info, $info-invert),
  "success": ($success, $success-invert),
  "warning": ($warning, $warning-invert),
  "danger": ($danger, $danger-invert),
  "twitter": ($twitter, $twitter-invert)
);

所以，再次，我的问题是如何将$colors映射扩展到base.scss之外（可能是App.vue中的另一个文件中）以保持原始状态不变？我没看到任何scss docs中显示的解决方案。

Answer 1

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// (
//   "lightest": 100,
//   "light": 300,
//   "medium": 500,
//   "bold": 700
// )

就像在示例中一样

$light, $light-invert, $dark, $dark-invert, $primary, $primary-invert, $info, $info-invert, $success, $success-invert, $warning, $warning-invert, $danger, $danger-invert,
$twitter, $twitter-invert

这些变量可以通过导入这些在https://unpkg.com/[email protected]/dist/buefy.min.css处获得

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";  // https://unpkg.com/[email protected]/dist/buefy.min.css

因此您可以将自己的变量放在自己的CSS文件中，并通过导入这些变量使它们可用。