Access the map value from within the map itself

Hello.

@use "sass:map";

$my-map: ( // what I want...
  color: gray, // ...is access to this...
  background-color: map.get($my-map, color), // ...from hire.
) // is it possible?

[mirisuzanne]

Yeah, that’s a common pattern in Sass, and there are multiple solutions outside using self-referential maps.

Modules with !default do give users the ability to customize the values dynamically before compilation. If the tool only needs to be configured once per entrypoint/compilation-path, this approach works great.

@use 'variables' with ($input-color: blue);
// $input-bg: white; $input-color: blue; $input-icon-color: blue; $input-border-color: $input-blue;

If users need to redefine the variables multiple times per compile, mixins and functions are designed for exactly that: pass in any set of arguments, and re-generate return/output values based on the new input. You can even create a mixin that updates global variables with the !global flag, or a function that generates your initial map, and can be called to re-generate that map based on new inputs.

@function input-colors($bg: white, $color: black, $icon: $color, $border: $color) {
  @return (
    bg: $bg,
    color: $color,
    icon: $icon,
    border: $border,
  );
}

$default-map: input-colors();
$user-map: input-colors(papayawhip, maroon);

[mirisuzanne]

If anyone is interested, I’ve used various workarounds for this over the years. I even maintain a tool that is built around exactly this feature: https://www.oddbird.net/accoutrement/. It works by adding a #key (<functions>) syntax that is computed whenever the map is called:

$colors: (
  'brand': rgb(13, 127, 165),
  'accent': '#brand',
  'text': '#accent' ('shade': 75%),
);

html (
  color: color('text');
);

That gives us both internal map reference, and dynamic calculation when values change. The downsides are a new syntax, and a slightly slower compile. (The latter should be helped by having Sass nested-map functions available now, just need to make the update).

But lately I’ve been moving away from that, and using Sass modules to auto-construct maps from variables. Rather than a colors map, I start with a _colors.scss partial, with variables that can reference each other easily:

// _colors.scss
$brand: rgb(13, 127, 165);
$accent: $brand;
$text: shade($accent, 75%);

Then I convert the module-variables to a map on-import, whenever I need it in map-form (for loops, etc):

@use 'colors';
@use 'sass:meta';

// a map of all the color variables, with variable names converted to map keys
$colors: meta.module-variables('colors');

That covers most of the use-cases for us, without any dependencies. Hope that’s helpful.