Get CSS Parameter from Typescript Angular

Question

Is there a way to Get a variable that is set in the global scss file from a ts file in Angular (8) I'm looking to use some of the defined variables dynamically in a canvas element defined in the ts code.

Answer 1

I have a way to do this using a styles service based on https://en.programqa.com/question/52907585/

---

Within Global.SCSS

@mixin ExportVariables($map, $prefix: null) {
  $mapPrefix: "--#{$prefix}";

  @if ($prefix){
    $mapPrefix: "#{$mapPrefix}-";
  }

  body {
    @each $name, $value in $map {
      #{$mapPrefix}#{$name}: $value;
    }
  }
}

--idle-state: #29ABE2;

// Import each of these in the theme service
$stateSCSS:(
  idle: var(--idle-state),
);
@include ExportVariables($stateSCSS, 'stateSCSS');

In the Service

const bodyStyles = window.getComputedStyle(document.body);

this.stateSCSS = {
  idle: bodyStyles.getPropertyValue('--stateSCSS-idle'),
};