How to use SASS with Sencha Touch without Sencha Cmd

How to use SASS with Sencha Touch without Sencha Cmd

This article shows how you can install SASS for Sencha Touch (2.2) when you are not using the Sencha Cmd tools.

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).

gem install sass

Installing Compass

image

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

gem install compass

Application structure Sencha Touch app

Apps
  -- MyApp
     -- controller
     -- view
     -- model
     -- store
     ...
     app.js
Sencha
  -- Ext-4.2.0
  -- touch-2.2.1
     ...
     -- resources
        -- themes
           -- stylesheets
              -- sencha-touch

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.

# 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:

Apps
  -- MyApp
     -- styles
        -- css
        -- sass
           sencha-touch.scss
        -- stylesheets
           -- fonts
              -- pictos
                 ... some files ...
        config.rb

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 compile

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:

compass watch

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';
@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

More from same category