View Full Version : Styling, Compass and SASS (0.94)

13 Sep 2010, 11:06 PM
After upgrading to 0.94 I need to change some of the styling again.

How do I set up and compile the new structure/project?

I am a total newbie to Ruby, Compass and SASS so a step by step recipe would be great.

Basically I only need to change the $base_color: variable and recompile the css.

Any help would be greatly appreciated.

13 Sep 2010, 11:22 PM
There's lots of tutorials out there: http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/

14 Sep 2010, 12:41 AM
Thanks for the quick reply and the link. But not really what I was looking for.

I have installed compass and played arpund with sass but I am more interested in how to specifically set up and compile the files located in sencha-touch-beta-0.94/resources to produce a new ext-touch.css with the colors I need (Commercial Branding).

I was able to complile older versions (after a while) but 0.94 seems to contain a different (more complicated) folder structure.

Everything I try seems to result in errors.

We have implemented a comercial business App using Sencha-Touch that is ready for Beta testing and I only need to change the colors of the toolbars and buttons before I can release it.

I am assuming that I need to change the variables like "$base_color:" found in "sencha-touch-beta-0.94\resources\themes\stylesheets\sencha-touch\default\_variables.scss" - But I am only guessing.

Do I need to set-up-any-new/change-any config files or should I just be able to make the changes and then compile everthing as is?

Like I said I am new to compass and sencha's sass resources are a little hard to follow. Spending hours of time learning SASS and COMPASS to figure this out by myself is not very cost effective when all I need to do is change 1 or 2 colors.

Have I understood how sencha is ment to be styled or am I fiddling in the wrong place?

If I am on the right track all I need is a pointer as to what files/variables control the base colors, help setting up any config files if needed and instructions as to what/where (folder) to compile to produce a new ext-touch.scss with correct colors.

Also... Is this stuff documented anywhere?

Any help is greatly appreciated.

14 Sep 2010, 1:19 AM
Assuming you have everything installed:

1) Create a new folder, myproject
2) Copy the resources/sass and resources/themes folder to myproject
3) Open themes/stylesheets/sencha-touch/default/_variables.scss
4) Change $base_color to #ff0000
5) cd myproject
6) compass compile sass

14 Sep 2010, 1:43 AM
Yeah... Thats what I figured and have been trying to do...

Here is a screen shot.


Any ideas what I am doing wrong.

14 Sep 2010, 10:44 AM
Hi all I know this is not the response you're looking for, but I would hold off on major styling at the moment. .94 and .95 represent the start of a major refactoring, which will be finalized by 1.0. A lot of variables are either changing names (to be better scoped) or turning into mixins. Around 1.0, we'll start to release demos and tutorials that cover styling in great detail.

In the meantime, if you are feeling extra experimental, just make sure you're running the very latest version of Compass it's necessary to use our new sencha-touch compass "Extension".

15 Sep 2010, 12:08 AM
Cool.. I'll try upgrading compass.

Fully understand regarding senchas position regarding styling at the moment.

Thanks for the reply.

15 Sep 2010, 12:22 AM
Well. I upgraded to 0.10.5 but still get the same error.

It was worth a try ;-)

15 Sep 2010, 12:29 AM

I upgraded to Sencha-Touch 0.95 and it compiled!!!

6 Jan 2011, 6:44 PM
How did you run compass command successfully? Here what I got:

c:\Personal\sencha-published\resources>compass compile sass
'compass' is not recognized as an internal or external command,
operable program or batch file.

Did you change something in global variables in Windows?

7 Jan 2011, 12:19 AM
No... I dont think so.. I just installed Ruby and then latest version of compass. I have not had any problems with it since 0.95.

7 Jan 2011, 2:08 PM
Podlipensky - sounds like you need to install compass. See the first part of this: http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/