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
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
After Ruby is installed you can install SASS. This has to be done from the DOS prompt (cmd box).
gem install sass
Installing Compass
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.