How to use SASS with Sencha Touch without Sencha Cmd

As a developer who isn't big on styling, utilizing Sencha Touch's pre-existing styles is a plus. Learn how to effectively use SASS with Sencha Touch for easier styling modifications, even without Sencha Cmd. This article guides Windows 8 users through a successful SASS experience with Sencha Touch 2.2, with adaptations for Apple or Linux systems.

Installing Ruby

You can download the Ruby installer from here: link.

Once downloaded, simply install Ruby as you would any other Windows program. I installed Ruby in c:Ruby. The installation will modify your Windows globals, making the Ruby for Rails command line accessible from the DOS prompt. Rest assured, while not heavily featured in this article, Ruby is crucial for SASS and Compass.

Installing SASS

Once Ruby is installed, you can proceed to install SASS. This installation process needs to be carried out from the Windows command prompt (cmd box).

Installing Compass

After installing SASS, you can proceed to install Compass. This step also needs to be done from the Windows command prompt (DOS prompt).

Application structure Sencha Touch app

In the Apps folder, keep your apps in a normal MVC structure, and in the Sencha folder, store your 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.

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

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

# Compass configurations
sass_path = 'sass'
css_path = 'css'
environment  = :production
output_style = :compressed

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:

environment  = :development
output_style = :expanded

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:

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

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@import 'sencha-touch/default/src/Button';
@import 'sencha-touch/default/src/Panel';
@import 'sencha-touch/default/src/Sheet';
@import 'sencha-touch/default/src/Toolbar';
@import 'sencha-touch/default/src/carousel/Carousel';
@import 'sencha-touch/default/src/dataview/IndexBar';
@import 'sencha-touch/default/src/dataview/List';
@import 'sencha-touch/default/src/field/Field';
@import 'sencha-touch/default/src/field/Radio';
@import 'sencha-touch/default/src/field/Search';
@import 'sencha-touch/default/src/field/Select';
@import 'sencha-touch/default/src/field/Slider';
@import 'sencha-touch/default/src/field/Spinner';
@import 'sencha-touch/default/src/field/TextArea';
@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/form/FieldSet';
@import 'sencha-touch/default/src/picker/Picker';
@import 'sencha-touch/default/src/slider/Slider';
@import 'sencha-touch/default/src/slider/Toggle';
@import 'sencha-touch/default/src/tab/Panel';

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.

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

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@import 'sencha-touch/default/src/Button';
@import 'sencha-touch/default/src/Panel';
// @import 'sencha-touch/default/src/Sheet';
@import 'sencha-touch/default/src/Toolbar';
// @import 'sencha-touch/default/src/carousel/Carousel';
// @import 'sencha-touch/default/src/dataview/IndexBar';
@import 'sencha-touch/default/src/dataview/List';
@import 'sencha-touch/default/src/field/Field';
// @import 'sencha-touch/default/src/field/Radio';
@import 'sencha-touch/default/src/field/Search';
@import 'sencha-touch/default/src/field/Select';
// @import 'sencha-touch/default/src/field/Slider';
@import 'sencha-touch/default/src/field/Spinner';
@import 'sencha-touch/default/src/field/TextArea';
@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/form/FieldSet';
@import 'sencha-touch/default/src/picker/Picker';
@import 'sencha-touch/default/src/slider/Slider';
@import 'sencha-touch/default/src/slider/Toggle';
@import 'sencha-touch/default/src/tab/Panel';

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

• Compass
• SASS
• Sencha Touch documentation