How to use SASS with Sencha Touch without Sencha Cmd

As a developer I am not so much into styling my apps, for Sencha Touch already comes with great styling. But with Sencha Touch (as with Ext JS) you can use SASS and Compass to make modification to the styling a lot easier. As I am not using Sencha Cmd and my apps are using a different structure, I thought I write a small article on how to make SASS work.

This article shows how you can quickly have a successful SASS experience with Sencha Touch (2.2). I am using a PC with Windows 8, so you have to adapt a bit if you are using an Apple or Linux. On  Apple OSX, Ruby is standard installed, so you can skip the installation.

Installing Ruby

image

You can download the Ruby installer from here: link.

After the download just install it as a normal Windows program. I have installed my Ruby installation in: c:Ruby. After the installation your Windows globals will be modified, so that Ruby for Rails command line is available from the DOS prompt. Don’t worry there is not much Ruby in the rest of this article, but it is required for SASS and Compass.

Installing SASS

image

After Ruby is installed you can install SASS. This has to be done from the DOS prompt (cmd box).

Installing Compass

image

After SASS is installed you can install Compass. This has to be done from DOS prompt as well.

Application structure Sencha Touch app

In the Apps folder I have my apps in a normal MVC structure and in the Sencha folder I have my Ext JS and Sencha Touch distributions.

Styles folder and config.rb

What we do next is creating a new folder in the “MyApp” folder called styles. If you want to you use your Sencha Touch styles for more apps then you could also place it in the Apps folder.

  • In the styles folder you create 2 new folders: sass and css.
  • In the styles folder you create a file called config.rb.

The config.rb file contains the Ruby code to configure Compass with our situation. Copy the following code into the config.rb file. Please change the path to your own Sencha Touch distribution. The sample shown here is according the structure mentioned above.

What this code does is loading the Sencha Touch distribution and tells where our SASS and CSS code is located.

Alternatively you can use the following code for environment and output_style:

This will give a larger CSS with all comments included, don’t use this in production environments, to keep the code small that is downloaded to the browser.

The fonts don’t come automatically

For some reason the fonts are not recognized by Compass as being part of the Sencha Touch distribution. For this you have to copy the folder /themes/fonts in your Sencha Touch distribution to a new folder called stylesheets in the folder styles.

sencha-touch.scss

Finally we create a file called sencha-touch.scss in the folder styles/sass. In this file you put the following content:

This file is a modified version of the same file in folder: /themes/templates/project/ in your Sencha Touch distribution, for that one doesn’t work. It will give you “mixin not found” errors.

Final contents of the styles folder

When you have done all your styles folder will have the following content:

Compile your theme

Now you can see if everything works by compiling the style sheet sencha-touch.scss. Go to the console or command prompt and change the directory (CD) to the folder styles of your application.

Now type:

Compass will now compile all the style sheets that have changed in the sass folder and place them in the css folder. If the created CSS looks good and have no errors, you’re done.

Watch the styles folder

Finally we don’t want to do this every time we change something. So we can add a watch on the styles folder that checks for changes automatically. Keep your DOS box open and change the directory to the styles folder and type:

Now when you make any changes to any of your style sheets with your code editor, the style sheet will be compiled automatically.

Limit the size of your CSS

By default the Sencha Touch CSS file is quite big. You can limit your  CSS size by removing some modules you don’t need in the sencha-touch.scss file.

But be careful with this, if your style sheet is used for more than one app. The best way is to create the customized style sheet for every app. When you compress the style sheet by modifying the config.rb file, the size could drop dramatically.

Check out this video for more SASS and Sencha Touch

Please don’t follow the instructions on the installation of SASS in Sencha Touch in this video, but for how you can use SASS to make your own styling in Sencha Touch.

 

Links

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Comments

Trackbacks

  1. […] Learn more […]

  2. […] Compass and SASS: Avoid the habit of embedding styles directly into HTML or using the ‘style config on components. It is important or rather mandatory to learn about the use of .scss files todefine […]

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.