cssangulartypescriptsassangular8

Get CSS Parameter from Typescript Angular

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.

Solution

  • 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'),
};