How to override map merge in scss?-CodePudding

Apologies for the basic question but I am very new to SCSS. I have this in variables SCSS file

$button-colors: () !default;
$button-colors: map-merge(
    (
      "success": #28a745,
      "info": #17a2b8,
      "warning": #ffc107,
      "error": #dc3545,
      "default": #343a40
    ),
    $button-colors
);

How can I override the colors in custom file ?

CodePudding user response：

You can simply create another map with the same values that you want to override.

$button-colors: (
  "success": green,
  "warning": red
);

Here is a JSFiddle showing the example

Also you can read up on the topic of maps here

CodePudding user response：

Easily set the value of $button-colors variable before @import your sass file or at beginning of your code.

About !default more info is here: https://sass-lang.com/documentation/variables#default-values

This line $button-colors: () !default; do nothing when $button-colors defined before and when it's not defined before assign empty map to $button-colors; value of $button-colors will overwrite default values defined in the map-marge.

More information about map-marge is here: https://sass-lang.com/documentation/modules/map

map-marge will overwrite 2nd map values on 1st map values for duplicated keys.

// overwriting values
$button-colors: (
    "info": #ccc,
    "error": #fff
);

@import <your sass file address or name>

// overwriting values
$button-colors: (
    "info": #ccc,
    "error": #fff
);

$button-colors: () !default;
$button-colors: map-merge(
    (
      "success": #28a745,
      "info": #17a2b8,
      "warning": #ffc107,
      "error": #dc3545,
      "default": #343a40
    ),
    $button-colors
);