Mastering the Compass/SASS Setup with Sencha Touch

[DonSanto]

Hmm, I don't get it. I have everything set up correctly but when i compile I only get the errer message "Nothing to compile. If you're trying to start a new project, you have left off the directory argument."

I cd into the actual sass directory and the do compass compile. Is that wrong to do?

[dgotty]

@markwyner

you are the effin man! thank u so much for posting this because the worst part of styling sencha touch is just getting everything set up and running.

[markwyner]

Thanks, dgotty. So glad it helped.

[suzuki1100nz]

Thank you for this post - Had ExtJS setup but was struggling to get Touch theming working - This post helped immensely

+1

[chandaboy]

Hi all,

I was getting this error, when I run the code..

please see the attach file... and reply me asap.

[JumpSlash]

@chandaboy

You need to open app.scss and put the correct file path within the very first @import. Read the first post of this thread for details.

[mfogarty]

When using touch to generate your starting directory

@import '../sdk/resources/themes/stylesheets/sencha-touch/default/all';

[ronan quillevere]

We made up a very simple tutorial to setup sass and compass on windows 7. Maybe It can help someone here.


http://one2teamdev.blogspot.fr/2012/08/sass-for-sencha-touch-2-windows-7.html

[jep]

For those windows users who might have gotten tripped up - be sure to use forward slashes and not backwards ones. Once I did that, ST 2.1 RC1 worked out of the box without any of the changes mentioned in this thread. I didn't have to fiddle with anything (other than previously installing ruby/sass/etc), just do:

compass compile project/resources/sass/

[rvoth]

I've been struggling with this SASS stuff the last few days. I've gone and set up my project just like how the guide says to and everything compiles with compass but my icons don't seem to show up, but my custom colour for buttons does work.

One thing I've noticed is in my sencha-touch.css is this:

/* line 38, C:/Users/rvoth/Sencha/ClaimApp/assets/resources/sass/../themes/stylesheets/sencha-touch/default/core/../_mixins.scss */
.x-tab img.home, .x-button img.x-icon-mask.home {
  -webkit-mask-image: theme_image("default", "pictos/home.png");
}

In another example, I've seen that webkit-mask-image line have url() and then an already base64 encoded string there.

My config.rb looks like this:

# Delineates location of the config.rb file which should be in the same directory as your SCSS file(s)
sass_path = File.dirname(__FILE__)

# Points to the location of the CSS file(s) you'll call from your HTML document
css_path = File.join(sass_path, '..', 'css')

# Points to the images directory used by the Sencha Touch theme
images_dir = File.join(sass_path, '..', 'themes', 'images', 'default')

# Points to the Sencha Touch theme
load File.join(sass_path, '..', 'themes')

# Denotes how the CSS files are compiled by Compass
output_style = :compressed
environment = :production

My sencha-touch.scss:

@import '../themes/stylesheets/sencha-touch/default/all';
    
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;

@include pictos-iconmask('add');
@include pictos-iconmask('team');
@include pictos-iconmask('compose'); 
@include pictos-iconmask('info');
@include pictos-iconmask('star');
@include pictos-iconmask('more'); 
@include pictos-iconmask('user');
@include pictos-iconmask('home');

Here's an image of my folder structure: http://i.imgur.com/KBkOQ.png

Everything looks right to me. The only thing that I can possibly think of is that we're using sencha-touch-1.1.1, would it possibly have something to do with not being version 2?

Edit: Figured this out myself. If anybody did what I did, make sure you're using the .css files from the /css/ folder and not the /stylesheets/ folder (if you have one in your /resources/ folder. Apparently that was added in by accident.