how to change the global variable inside a scss mixin

Question

theme-variables.scss

//---------------------------------------------------------
//Declare a global variable and set it to red color         


        

Answer 1

You will need a mixin function in your component.scss.

And then have a @include in your main.scss file.

component.scss

@mixin text-color-mixin($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  .text-color {
    color: if($is-dark-theme, red, blue);
  }
}

main.scss

@import ...../component.scss
...

...
@include  text-color-mixin($theme);

To find out more on how you can structure your angular project themes you can look at https://github.com/angular/material.angular.io

This is the official repo for the angular material io documentation site.

EDIT

I think this also answers your question

How to manipulate scss variables in Angular2 components