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; 
}
    

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; 
}
    

• css
• sass
• primeng
• css-variables
• theming

2 Answers 2

You can use interpolation to do this.

SASS Interpolation Docs

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

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;
}