Possible to pass variables into .sccs file during runtime?

[bingles]

Hey Guys,

Was hoping to get some help on figuring out whether or not it is possible to pass variables during run-time into the the .SCSS file. Has anyone achieved this yet or can share some knowledge surrounding it?

Thanks!

[thefugal]

.SCSS files are compiled into .CSS (at compile time). At runtime, the .SCSS is not even used. You'll have to use the variable to directly manipulate the CSS, unfortunately.

[bingles]

So it seems possible to dynamically store a variable (say a color override for toolbar), but it will have to target the CSS only. Doesn't seem ideal given the output. Wondering if an ID can be set for the specific item and just have the variable affect that style. Think that could work?

[thefugal]

If you mean, put an ID on the specific component you want restyled, and then use variable to restyle that one specific component, then yes this is possible.

You can do it when defining the component:

{
    xtype: 'toolbar',
    id: 'my-toolbar',
    style: {
        ...
    }
}

or change an existing component:

Ext.getCmp('my-toolbar').setStyle(...)

[bingles]

Thanks that makes sense.

I now have an ID set for my toolbar, but was curious as to what my choices were in regards to storing this variable. Does it have to exist in the view js or can is there a place I can set it and have it act as a "global" variable for all instances of the specified ID?

For example, the default toolbar color is gray (via sccs theme). The hopes would be to use this variable to store a hex value, say for a background color and have an ID of 'green-toolbar' on some component(s) of choice.

I guess my question is in regards to how to best set this up...assuming it is possible.

[mitchellsimoens]

I would make different toolbar ui (very easy in SASS) and specify the ui config on the toolbar instead of the id config.

[thefugal]

That's a good point. I was assuming that you needed to be able to completely control the style (e.g., select any color at runtime), not only choose from a few style options. If you have a small, predefined set of "themes" that you will be choosing from, making different ui's in SASS is certainly the way to go.