How to overwrite css variables value with scss variables

Question

I am working with primeng and would like to overwrite the css variable value. (this is not important but this will make my issue more clear and what I try to achieve)

for example if I have an badge and i would like to set the background color.

in my debug console I can retrieve the styling that is applied.

background: var(--p-badge-primary-background);

in my stylesheet I have the following code

@import "styleGuide";

.p-badge {
  --p-badge-primary-background: red;
}

this works fine but I have a whole styleguide defined and I want to use this as a template so I can changed the layout/style with minimal changes. I don't want look for al the refences of specific color. (here I overwrite a css varible with a new value)

What I like to achieve is to use a scss variables for the value that is defined in my styleguide that I imported.

.p-badge {
  --p-badge-primary-background: $color-brand-primairy; 
}

Naren Murali · Accepted Answer · 2025-03-20 13:53:59Z

2

You can use interpolation to do this.

SASS Interpolation Docs

.p-badge {
  --p-badge-primary-background: #{$color-brand-primary};
}

answered Mar 20 at 13:53

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ignacio Galdames · Accepted Answer · 2025-03-20 15:08:05Z

0

What I do is this:

on helpers.scss

@use 'variables' as vars;

on _variables.scss

$black: #000;
$white: #fff;

$colors: (
  'black': $black,
  'white': $white,
);
:root {
  @each $name, $color in $colors {
    --#{$name}: #{$color};
  }
}

and I get on main.css

:root {
  --black: #000;
  --white: #fff;
}

answered Mar 20 at 15:08

Ignacio Galdames

1231 silver badge9 bronze badges

1 Comment

Ignacio Galdames Mar 20 at 15:10

and then you can just call .black { background-color: var(--black); }

Collectives™ on Stack Overflow

How to overwrite css variables value with scss variables

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related