1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    233
    Answers
    1
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default Answered: Referencing Sass mixins without building everything

    Answered: Referencing Sass mixins without building everything


    I'm trying to make a few custom UI's for components, and I want to keep these custom styles separate from the default Sencha Touch styles. Currently, it's generating a file with all the Sencha Touch CSS + my custom styles.

    Here's the code in my SCSS file:

    Code:
    @import 'sencha-touch/default/all';
    
    
    @include sencha-button-ui('blue-button', #1e96ca);
    And here's my project config:

    Code:
    # Path of the Sencha Touch installation's resources folder
    $resources_path = "../../lib/sencha-touch-2.0.0/resources"
    
    
    # Get the directory that this configuration file exists in
    dir = File.dirname(__FILE__)
    
    
    # Load the sencha-touch framework automatically.
    load File.join(dir, $resources_path, 'themes')
    
    
    # Compass configurations
    sass_path    = dir
    css_path     = File.join(dir, "..", "css-debug")
    environment  = :development
    output_style = :expanded
    Is this possible?

  2. Those are just the necessary contents of the config.rb file. I found a way to make this work by just importing the button widget mixins:

    Code:
    @import 'sencha-touch/default/widgets/buttons';
    
    
    @include sencha-button-ui('blue-button', #1e96ca);

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So you want two CSS files then? One for Sencha Touch's CSS and one for your application CSS?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    233
    Answers
    1
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default


    Yep... different parts of the application are downloaded on-demand (both JS + CSS) so I don't want to include the entire Sencha Touch CSS every time in addition to module's CSS.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    FWIW, I wouldn't do that. Loading files in the middle of your app will make your app act slow and if you don't have internet connection or slow connection it will take forever or just fail.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    233
    Answers
    1
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default


    True, but often times the users only use 1-2 of the modules, so it's a waste to pull down everything if they aren't even going to use the majority of it. Is this possible?

    Thanks for the quick replies.

  7. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    233
    Answers
    1
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default


    Any idea if this is possible?

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    Matthew Fabb is on a distinguished road

      0  

    Default


    I think what you are trying to do can be done this way:

    Code:
    # Get the directory that this configuration file exists in
    dir = File.dirname(__FILE__)
    
    # Load the sencha-touch framework automatically.
    load File.join(dir, '..', '../../lib/sencha-touch-2.0.0/resources/themes')
    
    # Compass configurations
    sass_path = dir
    css_path = File.join(dir, "..", "css-debug")
    environment = :development
    output_style = :expanded

  9. #8
    Ext JS Premium Member
    Join Date
    Nov 2009
    Posts
    233
    Answers
    1
    Vote Rating
    1
    chinabuffet is on a distinguished road

      0  

    Default


    Those are just the necessary contents of the config.rb file. I found a way to make this work by just importing the button widget mixins:

    Code:
    @import 'sencha-touch/default/widgets/buttons';
    
    
    @include sencha-button-ui('blue-button', #1e96ca);