Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Theming Sencha Touch Apps with Sass

Page of 168

Working with the /resources/sass/app.scss file

The default Sass stylesheet for Sencha Touch applications is broken down into three major sections:

  • At the top of the file you can set a series of Sass variables to change default styles
  • The middle section of the file executes a series of mixins that are responsible for generating the CSS styling of the Sencha Touch UI components. You can reduce the overall size of the generated CSS by commenting out mixins that correspond to UI classes that your app is not using.
  • At the end of the file you can define custom classes as well as invoke Sencha Touch Sass mixins to create custom styles.

The default Sass file generated by Sencha Cmd 3 resembles the following:

// set global variables here

@import 'sencha-touch/default/all';

// comment out any mixins not used in your app:
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include sencha-draw;
@include sencha-charts;

// define custom styles here


Configuring File Paths

In the previous example, the base path for the @import directive is set within a Ruby file (config.rb) that is typically located in the same folder as your .scss file

Modifing the config.rb file should not be necessary if your app was initially generated by Sencha Cmd 3.

A sample config.rb file is listed below. Note the contents of line 5 that configures the root file path for @import directives.

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', '../touch', 'resources', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production

Compiling SCSS Files

Presuming that you have Sass and Compass installed correctly, you should be able to compile your .scss file into a .css file by completing the following steps:

  1. Open a Command Prompt
  2. Change directories to /path/to/app/resources/sass
  3. Issue the following command:

    compass watch .

Compass will continue to run, using file polling to watch for any changes to your .SCSS file. As soon as a change is detected, Compass will re-compile the .scss file automatically.

Page of 168
comments powered by Disqus