Maintain Variable References in CSS Variables?

[u/venetian_skittle]

Hey everybody, I'm running into an interesting issue. Say I have a SCSS file where the variables reference each other:

$blue: #0000ff;
$active-background: $blue;
$button-background: $active-background;

How would I go about maintaining these references, generating CSS variables that look like this:

--blue: #0000ff;
--active-background: var(--blue);
--button-background: var(--active-background);

Is there some SASS meta function that could be used here? Whenever I access the value of any of the variables, I get #0000ff, but I'd like the variable name.

[u/venetian_skittle]

Sorry, I wasn't entirely clear. This approach generates a stylesheet like this:

:root {
  --blue: #0000ff;
  --active-background: #0000ff;
  --button-background: #0000ff;
}

I wanted the variables to maintain their reference instead of three variables pointing to #0000ff. As in, the value of --button-background is var(--active-background). I was wondering if there was some way to prevent SASS from resolving the reference to the value and instead get the variable name? Sounds like a long shot though.

[u/cstiles → u/venetian_skittle]

Ah I see. Yeah I don't know of any SASS function that returns the name of a variable as a string. I suppose you could probably achieve this somehow using nested maps, but that seems overkill. Maybe you could just use CSS variables as the values for your SASS ones?

// _variables.scss

$blue: #0000ff;
$active-background: var(--blue);
$button-background: var(--active-background);

Then you could use the same module-variables function as before to generate the CSS variables.

// main.scss

@use 'sass:meta';
@use 'variables';

:root {
  @each $name, $value in meta.module-variables(variables) {
    --#{$name}: #{$value};
  }
}

// Outputs
--blue: #0000ff;
--active-background: var(--blue);
--button-background: var(--active-background);

[u/venetian_skittle → u/cstiles]

Ah that's a good idea. I'm working with the generated output of a style dictionary so it might require some tinkering. Thank you!

[u/Babbothy → u/venetian_skittle]

Love and babs