I wish to get color from the user and modify the existing sass color variable to the color choose by the user. I saw a link, but still there is no example related to angular 2 on this. Please help. Thanks in advance.
Add a comment
|
2 Answers
SASS is CSS pre-processor, so by the time you're client HTML markup is consuming it, the variables have already been materialized and now form standard CSS.
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your web site.
As Manu Valdés calls attention to, there are other things that you can do with Angular2 specifically to help with styling. For details on component styling check out the official documentation here.
3 Comments
AishApp
I have two application in a single repository and i wished to change the scss variable of one application from other as per users choice.
David Pine
It sounds like you need to look into theming.
AishApp
Well. I want to change the colors in the theming itself so that the variable is used in the entire application.
You can use inline styles like <div [style.color]="colorVar"> so you can change the colorVar value from ts to change the color of the div
4 Comments
AishApp
I have used the sass variable in many locations and i wish all to get updated as per the user's choice.
Manu Valdés
don't use the sass variable, use the typescript variable.
AishApp
you mean to use the typescript variable as global and use it across the app?
Manu Valdés
If you need it globally, you can put the variable in a service provider that you inject on your pages, so that you can access the variable it from every template; this way when you change the value it will update in your templates globally.