时间戳

首页 > 解决方案 > 如何在 SCSS 中扩展变量的映射？

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

问题描述

我正在使用一个名为 Buefy 的包，它是 Bulma CSS 框架库的 Vue.js 包装器。Buefy 在其模板组件上放置一个属性/属性，称为type（例如，type="is-warning"）。根据Buefy 文档，术语“is-warning”是根据$colorsSCSS 中设置的变量预定义的：

https://buefy.org/documentation/button/#api-view

所以我按照Buefy 的这些说明来自定义$colors地图，但是我想做的是将这些说明中定义的初始 SCSS 保留在单个base.scss文件中，然后使用我自己的自定义 SCSS 文件进行扩展。

我已将该base.scss文件包含在我的 Vue 项目中，文件中包含以下代码段vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/base.scss";
        `
      }
    }
  }
}

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

这是一个片段base.scss，其中$colors定义了地图：

```css
$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.scssApp.vue我没有看到scss docs中显示的任何解决方案。

标签： cssvue.jssassbulmabuefy

解决方案

您的自定义颜色值将放入一个名为 的变量（后来合并到$colors）$custom-colors中，它实际上在“派生变量”的文档中进行了描述。

并对其进行自定义：

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$custom-colors: (
  "facebook": ($blue, $white),
  "linkedin": ($dark-blue, $white)
  // etc.
);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$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)
);

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

它在内部使用一个名为mergeColorMaps.

推荐阅读