If you’ve worked with Sencha Touch for more than 5 minutes, you have GOT to appreciate the aesthetics which the framework brings out of the box. You literally have to do nothing at all in order to get a slick, polished looking interface that works in webkit browsers and on iPhone and Android devices.

However, if you’re like me, you probably get to the point with your apps where you want to customize the look and feel. I mean, while the Sencha Touch default palette is nice, it’s pretty generic, so before long you’ll need to start developing a custom theme for your app.

An Abortive Start

Initially, this can be a challenge with Sencha Touch apps. The challenge stems not from the fact that anything magical is happening behind the scenes: it’s just JavaScript, CSS3, and HTML after all. Rather, it’s the way that it’s all packaged up.

If you take a look at one of the stylesheets, you’ll notice how crazy complicated they are. Let’s say you wanted to change the color of all the navigation backgrounds, for example. Well, you could use Chrome’s developer tools to inspect each and every interface, grab the selectors, and then try to overwrite them with a custom style sheet (that’s what I did my first time). But you’d find that you’re editing dozens of lines of code, just to make a simple change.

And what about custom navigation toolbar icons? Well, by default Sencha Touch’s stylesheets use the base 64 dataUrls of the images within the stylesheets. And there are only a handful available by default. So if you wanted to add your own custom icon, not only would you have to replicate the exact lines of code for navigation icons, but you’d also have to figure out the base 64 of your image, enter it PRECISELY within the stylesheet, and hope for the best. Best of luck if you ever need to tweak that image in any way.

Sounds onerous, eh? That’s because using a traditional “modify and overwrite” approach to stylesheets won’t get you very far with customizing your own theme for Sencha Touch. In fact, if you’re like me, you’ll get frustrated with it in about 20 minutes and give up.

Starting Over (The Right Way)

Fortunately, there is a much better and far less painful way to customize Sencha Touch themes. The answer lies in SASS.

SASS, short for for Syntactically Awesome Stylesheets, is basically an extension of CSS that allows for lots of cool stuff that we all wish CSS had–variables, nesting selectors, functions or “mixins”–you know, THAT cool stuff :). SASS makes this happen by using custom files with an extension of “.scss.” These files are then compiled in Ruby, and produce a valid, well-formatted .css file. But because of the extensible nature of SASS, simple, intuitive structures in the .scss files can create massively complex .css files, all without the pain of trying to maintain the complexity of the .css file itself.

So for example, let’s say you wanted to change the default “base” color of your Sencha Touch app. If you tried to do this via manual editing of the sencha-touch.css style sheet, you’d quickly find that you have literally hundreds of instances of this one color littered throughout your CSS file. While you could easily do a find-and-replace, that’s obviously not a great solution, and just opens the door to you messing up and breaking something.

With SASS, you can define this one color as a variable (more about this in future articles), and then use that variable throughout the .scss file to define this color. Yes, that’s right: define the color once, reuse it to your heart’s content. And when you’re sick of that color, you can simply change the value of the variable, and that’s all you have to worry about. Like I said, it’s exactly what we all wish CSS could do πŸ™‚

This one example is just scratching the surface of what SASS can do. I won’t belabor the point here, but be sure to check out the SASS website to see the full story of what can be accomplished.

Getting Started With SASS

Even if changing the one color is all you want to accomplish, you’ll need to get your environment set up for SASS. Because .scss files are compiled into .css files, you’ll need to get Ruby set up in your development environment in order to take advantage of the awesomeness of SASS. Β Here are the steps for getting everything set up. I’m deliberately dumbing this process down, since a lot of the tutorials I found assumed more knowledge of command line stuff than I knew when I was setting SASS up. So my apologies if this is overly descriptive.

UPDATE! The following is for Sencha Touch 1.0.1. If you are trying to get setup using Sencha Touch 1.1.0, see this updated walk through instead. It will help prevent major compilation fails πŸ™‚

Step 1: Install Ruby

To get SASS setup, you’ll first need to install Ruby and Ruby Gems (SASS is bundled with something called “Compass”, and Compass is a “Gem” that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if you’re stupid about these things, you can do what I did and just grab the Ruby 1.92 installer–it comes pre-built with Gems already configured.

  • Get the Ruby 1.92 Installer
  • Double-click the file to install, and choose “”Add Ruby executables to you PATH”
  • I installed to the default directory on Windows (C:\Ruby192\)

Step 2: Setup Compass

Now that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because I’m stupid about command-line stuff. So here’s a play-by-play of what to do (this is for Windows…I assume Mac is similar), just in case you suffer from a similar level of stupidity:

  • Open a new Command Shell (Start -> Run -> type “cmd”)
  • Navigate to your Ruby installation directory (cd/ruby192)
  • Type “gem install compass” – if it works, you should see a bunch of text appear about things being installed, configured, and what not.

Step 3: You’re Done!

At this point, “SASS” is ready to go. In the next article, I’ll walk through a basic setup for creating a custom theme file for your Sencha Touch app.