Results 1 to 7 of 7

Thread: Possible to pass variables into .sccs file during runtime?

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default Possible to pass variables into .sccs file during runtime?

    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!

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    4
      0  

    Default

    .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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    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?

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    4
      0  

    Default

    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:

    Code:
    {
        xtype: 'toolbar',
        id: 'my-toolbar',
        style: {
            ...
        }
    }
    or change an existing component:

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

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    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.

  6. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    I would make different toolbar ui (very easy in SASS) and specify the ui config on the toolbar instead of the id config.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    4
      0  

    Default

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •