How to manipulate scss variables in Angular2 components

Question

Is there a way I can change scss variables declared in Angular2 component? I want to add the theme dynamically based on user selection and hence need to modify the scss variables. I read about keeping all scss variables in a separate scss file and importing the same in other scss file. But can i import the same in my component file and modify the variables. Is this feasible? TIA

Currently I am using mixin. Code goes here:

// Color themes
$themes: (
  default: #ff0000,
  banana: #f1c40f,
  cherry: #c0392b,
  blueberry: #8e44ad,
  leaf: #27ae60,
  nightsky: #2980b9
);


// Helper theme mixin
@mixin theme($name, $color) {
    .#{$name}{
        background-color: lighten($color, 30%);
    }
  .#{$name} {
    h1{
      color: $color;
    }
  }
  .#{$name} {
    nav{
      a{
      color: $color;
      }
    }
  }
}

But is there a way I can alter the variables inside $themes map from Angular component.

Lazar Ljubenović · Accepted Answer · 2017-09-01 22:08:21Z

2

This is impossible by nature of Sass: it's a build-time tool, a pre-processor. Angular only knows about CSS (though the styles and styleUrls property in Component metadata).

This means that by the time Angular has got its hands on your styles, Sass has already been compiled to CSS. You cannot change Sass variables in run-time because they do not exist anymore at that point.

You can instead use custom properties and change them via regular JavaScript.

answered Sep 1, 2017 at 22:08

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

How to manipulate scss variables in Angular2 components

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related