CODEWITHSUNDEEP
angularsassionic2
V. Pivet
V. Pivet

Reputation: 1328

Ionic 2 : Change a sass variable dynamically

I use Ionic 2 and I want to change variable on my scss file dynamically.

I have this variable : 

$tab-image : url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');

I want to change the url by another in a .ts file to finaly change the picture. I want to change it in a component or a provider.

More over, I want to replace the url by somethink like : 

data:[my-file-type]';base64,[my-file-content]

Q : It is possible ?

Q : How can I do that ?

Upvotes: 2

Views: 2194

Answers (1)

VinceOPS
VinceOPS

Reputation: 2720

SASS is a pre-processor, meaning that once it has been processed (before your web page is rendered), you cannot re-process it.

Are you using your $tab-image as a background-image?

You may use NgClass in order to dynamically add/remove an additional css class to your component/node. This one having different styles, overriding any value (like background-image).

You can use url(data:image/png;base64,[...] in CSS. Be careful, IE7 and 8 don't support this syntax (IE8 does, but with a very tiny content). (NB: image/png is for the sake of the example. Use the appropriate MIME type according to your file).

Upvotes: 2

Related Questions