如何在 SCSS 中扩展变量的映射? [英] How to extend a variable's map in SCSS?

问题描述

我正在使用一个名为 Buefy 的包，它是 Bulma CSS 框架库的 Vue.js 包装器.Buefy 在其模板组件上放置了一个名为 type(e.g., type="is-warning")的属性/属性.根据

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

我已经在我的 Vue 项目中包含了 base.scss 文件，在 vue.config.js 文件中包含以下片段:

module.exports = {css:{加载器选项:{萨斯:{前置数据:`@import "@/assets/scss/base.scss";`}}}}

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

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

```css$颜色:(白色":($白色，$黑色)，黑色":($黑色，$白色)，光":($光，$光反转)，"dark": ($dark, $dark-invert),"primary": ($primary, $primary-invert),"信息": ($info, $info-invert),"success": ($success, $success-invert),警告":($warning，$warning-invert)，"危险": ($danger, $danger-invert),"推特": ($twitter, $twitter-invert));``

所以，同样，我的问题是如何在 base.scss 之外的不同文件中扩展 $colors 映射(可能在 App.vue) 保持原样? 我在 scss 文档.

解决方案

您的自定义颜色值将进入一个名为 $custom-colors 的变量(后来合并到 $colors)中代码>，它实际上在"衍生变量"的文档中有所描述.

并对其进行自定义:

//导入布尔玛的核心@import "~bulma/sass/utilities/_all";//设置颜色$自定义颜色:("facebook": ($blue, $white),linkedin":($深蓝色，$白色)//等等.);//设置 $colors 以用作 bulma 类(例如is-twitter")$颜色:(白色":($白色，$黑色)，黑色":($黑色，$白色)，光":($光，$光反转)，"dark": ($dark, $dark-invert),"primary": ($primary, $primary-invert),"信息": ($info, $info-invert),"success": ($success, $success-invert),警告":($warning，$warning-invert)，"危险": ($danger, $danger-invert),"推特": ($twitter, $twitter-invert));//导入 Bulma 和 Buefy 样式@import "~bulma";@import "~buefy/src/scss/buefy";

它在内部使用名为代码的自定义函数

>mergeColorMaps.

I am using a package called Buefy which is a Vue.js wrapper for the Bulma CSS framework library. Buefy puts an attribute/property on its template components called type (e.g., type="is-warning"). As per the Buefy documentation, the term "is-warning" is pre-defined according to the $colors variable set within SCSS:

So I followed these instructions from Buefy to be able to customize the the $colors map, but what I would like to do, however, is keep the initial SCSS defined in those instructions within a single base.scss file, and then extend with my own customized SCSS file.

I have included the base.scss file in my Vue project with the following snippet in the vue.config.js file:

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

So my question is, how can I extend the $colors map in the base.scss with my own names and values?

This is a snippet from base.scss, where the $colors map is defined:

```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)
);
```

So, again, my question is how can I extend the $colors map in a different file outside of base.scss (perhaps in App.vue) to leave the original untouched? I didn't see any solution shown in the scss docs.

解决方案

Your custom color values would go in a variable (later merged into $colors) called $custom-colors, and it's actually described in the docs on "derived variables".

And to customize it:

// 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";

It's internally using a custom function called mergeColorMaps.

这篇关于如何在 SCSS 中扩展变量的映射?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！