Dynamic variable in SCSS

Question

Hello I want to set the url dynamic based on a variable found in my Application.js. Sof if the variable is true, the path to the url should be like:

"https:/asite/resources/mybackground.jpg"

Otherwise it takes it directly from the resources folder of the application as such:

"/resources/mybackground.jpg"

So I need to append the variable in the url. The issue is that the variable is found in my Application.js file and not in another scss file.

How can I achieve this?

Please find my css code below:

.myviewport::after {
  background: url("/resources/mybackground.jpg") no-repeat;
  position: absolute;
  z-index: -1;
}

Can't you change the url with jQuery ? Something like `if(need_change) { $('.myviewport::after').css('background', 'url("the other URL")') }` — Mickaël Leger, Jul 26 '19 at 06:41
You can add it in your js file when you getthe variable value ! — Mickaël Leger, Jul 26 '19 at 13:17
I tried it..but does not work. The background image does not show. I did it in my controller as such: `init: function() { let need_change = true; if(need_change) { console.log('test'); $('.myviewport::after').css('background', 'url("/resources/image/mybackground.jpg") no-repeat'); } }` — Royos, Aug 02 '19 at 14:19
My viewport.js is as follows: `Ext.define('App.Viewport', { extend: 'Ext.container.Viewport', controller: 'viewportcontroller', requires: [ 'App.ViewportController' ], cls: 'myviewport', xtype: 'myviewport', items: [ ], });` — Royos, Aug 02 '19 at 14:19
My scss file as follows: `.myviewport::after { // background: url("/resources/mybackground.jpg") no-repeat; //Put in JQuery position: absolute; z-index: -1; }` — Royos, Aug 02 '19 at 14:19
Is there anything am doing wrong here? Pls have a look. Thanks. — Royos, Aug 02 '19 at 14:19
Try to remove the "no-repeat" in jQuery (only `$('.myviewport::after').css('background', 'url("/resources/image/mybackground.jpg"));`) and why your url is `/resources/image/mybackground.jpg` ? In your question it's `/resources/mybackground.jpg` — Mickaël Leger, Aug 02 '19 at 14:36
Yes the path was a mistype in the question. its "/resources/image/mybackground.jpg" But still does not work. I have put it in the **init** function is the js file..maybe its at the wrong place? `init: function() { let need_change = true; if(need_change) { console.log('test'); $('.myviewport::after').css('background', 'url("/resources/image/mybackground.jpg")'); } } ` — Royos, Aug 05 '19 at 06:58
Did you tried with just `$('.myviewport::after').css('background', 'red');` for example to see if it's jQuery problem or a file path problem ? Can you change the background color / image inside your console ? — Mickaël Leger, Aug 05 '19 at 07:19
Yes..also tried to see with a afterRender function. Red color does not show. So its issue with JQuery calling? `afterRender: function() { let need_change = true; if(need_change) { console.log('afterRender'); $('.myviewport::after').css('background-size', "cover"); $('.myviewport::after').css('background', 'red'); } }` The ''myviewport' variable is the xtype of my JS file. `Ext.define('BORA.view.main.MyViewport', { extend: 'Ext.container.Viewport', xtype: 'myviewport' });` — Royos, Aug 05 '19 at 07:36
@MickaëlLeger it works now..your help was previous, it guided me thru. Needed to remove the ***::after*** and it works like a charm. How to make your comment an answer? — Royos, Aug 05 '19 at 10:58
Cool if it works, I add my comment as an answer :) I was wondering about the `::after`, did you remove it totally ? (just to get it right in my answer) — Mickaël Leger, Aug 05 '19 at 13:54

score 0 · Accepted Answer · answered Aug 05 '19 at 13:53

0

You can do it in jQuery :

if(need_change) { 
    $('.myviewport').css('background', 'url("the other URL")') 
}

// else you keep the current background

answered Aug 05 '19 at 13:53

Mickaël Leger

3,426
2
17
36

Dynamic variable in SCSS

1 Answers1