CODEWITHSUNDEEP
angulartypescriptsassangular2-components
Manu
Manu

Reputation: 10944

How to manipulate scss variables in Angular2 components

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.

Upvotes: 3

Views: 1843

Answers (1)

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

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.

Upvotes: 2

Related Questions