Can we get dynamic value from angular in SCSS file

Question

Basically I want to use background color for each element as per user choice, user choice will be stored on database. User should webpage according to it's color profile. So, I need a idea to get that value from angular and store its value on scss variable and render it.

Answer 1

SCSS is a preprocessor, when you use SCSS it actually gets compiled into CSS and that's what you use.

Perhaps the best solution is to use ngStyle in the section you need.. body, div, or anywhere you want..

Example

<div ng-style="userStyle">
...
</div>

In your JS

$scope.userInfo = { backgroundColor: 'red' };
$scope.userStyle = {'background-color': $scope.userInfo.backgroundColor};

Assuming you have a userInfo object, with backgroundColor property.

Answer 2

This is not possible, angular is javascript code and runs in the clients browser, sass is pre-compiled to css, any variables will have been converted into the full values before it is rendered in the browser.

You would need to get angular to make a call to your server, and have the server generate a CSS file dynamically based on the value provided from angular. (I suppose you could do this on the client also, I'm sure there is a javascript library somewhere that lets you compile sass)

Answer 3

Scss compiled to css before build, so angular part can't control scss. You can use gulp/grunt to edit scss variables. But in your case it not helping.

The simple sulotion for you is to use ng-style. <div ng-style="{'background-color': scopeUserColor}"><div\>