Home » Featured, Headline, Web Development

How To Theme Sencha Touch with SASS on Windows

14 January 2011 7 Comments
How To Theme Sencha Touch with SASS on Windows

A good architect stays current with technology to better enable their team’s productivity. One often overlooked area is that of CSS, there have been many improvements. In this post I record the steps taken to successfully setup SASS (Syntactically Awesome Style Sheets) with Sencha Touch on Windows.

If you’re building a website with a non-trivial CSS file (aren’t we all),  SASS  makes managing the CSS a lot simpler.

“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.”

Sencha Touch uses SASS to manage its stylesheets. I’ve been researching this in my evenings and weekends and am at the point where I want to change how Sencha Touch looks. It’s not as simple as you’d think. Essentially I need to create a new theme. Hence a little SASS is warranted.

Unfortunately both the instructions on the Sencha site [LINK] and the SASS site [LINK] are a little out of date and buggy. Here now are the steps I followed to get this working on windows:

  1. Start by installing Ruby – http://rubyforge.org grab the latest rubyinstaller-1.9.2-p136.exe – nothing to it and you’ll end up with c:\ruby192 and some Start-Menu items.
  2. This comes with Gems so you can skips the gems install. There is one snag though with Ruby 1.9.2-p136 that the install sets up an incorrect folder – c:\ruby192\lib\ruby\site_ruby – remove this one (just rename it to be safe) and gems will work. Maybe they’ll fix this in the next release.
  3. Install Compass: at a Ruby command prompt type “gem install compass”. If you’re behind a proxy I found this works: “gem install –http-proxy <proxyAddress:Port> compass”

Next create a new folder in your Sencha folders. If your directories look like this

c:\myWebsite\js\sencha-touch-1.0.1\resources\css

c:\myWebsite\js\sencha-touch-1.0.1\resources\sass

You’ll want to create this one:

c:\myWebsite\js\sencha-touch-1.0.1\resources\SCSS

Inside that create two files as per the Sencha website:

Config.Rb (a ruby file)

# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)

# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")

# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")

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

# Specify the output style/environment
output_style = :compressed
environment = :production

No changes are needed to config.rb

Next create Application.scss(The file extension is important here)

// 1. Variable overrides, example:
// $base-color: #af2584;

// 2. Include Sencha Touch styles
@import 'c:\myWebsite\js\sencha-touch-1.0.1\resources\themes\stylesheets\sencha-touch\default\all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;

// 3. Define custom styles (can use SASS/Compass), example:
// .mybox {
//     @include border-radius(4px);
// }

The @import line is important. I changed it to the location of the default theme in Sencha Touch with the “all” appended.

Lastly, run SASS using “compass compile”. You’ll end up with a new file names “application.css” located under

c:\myWebsite\js\sencha-touch-1.0.1\resources\css\application.css

Now reference that new CSS file in your Sencha website and you’re all set. Refer to Sencha’s site for tips on customizing the Theme itself [http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/].

SASS on its own is a boon if you’re doing serious CSS work. If not it’s probably over kill. You can do things like define variables and have those determine your CSS based on functions, you can nest elements for easier maintenance and even remove whitespace and combine multiple CSS files into one automatically.

Definitely one for the toolbox.

7 Comments »

  • Maklomite said:

    Hey mate thanks for the one two!

    So was difficult to ascertain how compiling works:

    Lastly, run SASS using “compass compile”. You’ll end up with a new file names “application.css” located under

    — could you provide more step by step instructions on that part… like what do you type at the prompt 😉

    Cheers!

  • Francis (author) said:

    @Maklomite – that step is from the Sencha website (link is in the article above). Here’s the specific section from that article:

    To compile our stylesheet, we simply run the command “compass compile” in the Terminal from within the scss directory. This command will automatically look for the config.rb, and take care of compiling the CSS into the proper director

    If you’d like to just run SASS on it’s own, just type SASS <input> <output> at the command prompt but I haven’t looked at how to pass in the sencha config yet.

  • Bucs said:

    Francis, thanks for the effort, really appreciate it! You’re not kidding about the directions, woefully inadequate and not accurate. I’m trying to figure out when I fell into the Hot Tub Time Machine and the command prompt is all of sudden back in vogue :)

    You got me 90% of th way there. What I would add here is that since we are creating our scss directory at the same level as the sass directory, I would recommend that you open up Sencha’s config.rb file in the sass directory and simply copy that into your config.rb file in the scss dir since it will include any updates to their directory structure, or other changes (in theory anyways). The one posted above (and in the article) didn’t work for me.

    Anyway, you made my night..thanks!

  • Juliano Dasilva said:

    Francis, first of all thanks for your tutorial. Secondly, I can’t get passed installing haml. When I type “gem install haml/compass” I get the following errors:

    ERROR: Could not find a valid gem ‘haml’ in any repository.
    ERROR: While executing gem … bad responde forbidden.

    Thanks for your help!

  • Satish said:

    Thanks man!…helped me get started.

  • Nirupam said:

    thanks. it helped me get started.

  • Nirupam said:

    Thanks.. a lot

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.