How to use sencha touch css in SASS

[kevinv1990]

Hello all,

I have been experimenting with SASS this midday, it's really cool and i like it a lot.

Now i want to style using the sencha touch css as base, I did read the:
http://www.sencha.com/blog/an-introd...g-sencha-touch
blog post. Now i wanted to try out those demo's at the end of the blog, but i can't succeed, i had the sass example with the 3 buttons working, but this is a little too difficult for me

I get the following error when i startup my app: syntax error: undefined mixin 'sencha-panel'.

on line 21 of d:/users/..... in 'sencha-panel'
from line 21 of d:/.../../screen.scss


this is my code:

@import 'compass/css3';

$base-color: #7c92ae;
$base-gradient: 'glossy';

// Lists
$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
$list-header-gradient: 'matte';

// Tabs
$tabs-dark: #111;

@import '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-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;

I did NOT edit any other thing in the folder created by compass, so the config.rb is unchanged.

Any help would be appreciated.

Greetz,
Kevin Vermaat

[gcallaghan]

Did you move the files? can you post a pwd of where your application.scss is located and where your sencha folder is located?

If you have your own config.rb you need to make sure it references where the sencha files are.
For instance, I have my scss and config.rb located in
<MyProjectDir>/resources/scss
and the sencha library located in...
<MyProjectDir>/media/sencha
so my config.rb looks like...

sass_path = File.dirname(__FILE__)
css_path = File.join(sass_path,'..','..','media','css')
images_dir = File.join(sass_path,'..','..','media','sencha','resources','themes','images','default','pictos')
load File.join(sass_path,'..','..','media','sencha','resources','themes')

output_Style = :expanded
environemnt = :development

[kevinv1990]

Hey thx a lot for the response ,

Okay that is the problem, I did not reference to my Sencha touch files! One last quick question, let's say that I have my Sencha files at : C:\Program Files\Sencha\[here the ST files] and my ruby config file C:\Program Files\Ruby\Project1\config.rb.

How would my config.rb look like?

Sorry to ask you but this all is really new to me, so if someone knows, i would thank you a lot

Greetz
Kevin

[alexandra.ac]

@kevinv1990

Hi,

I'm also new to Sencha Touch and struggled with the theming until I got the paths right. This is how my folders are structured:

folder_structure.jpg

I basically moved the sencha-touch folder from themes/stylesheets into the sass folder.

Here is the config file (sass/config.rb):

# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)
 
# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")
 
# Delinate the images directory
images_dir = File.join(sass_path, "..", "themes","images")
 
# Load the sencha-touch framework
load File.join(sass_path, '..', 'themes')
 
# Specify the output style/environment
#output_style = :expanded
output_style = :compressed
environment = :production

and the scss file (sass/sencha-touch.scss) :

$body-bg-color: #000000;
$base-color: #333333;
$active-color: #ffffff;
$base-gradient: 'glossy';
 
$include-default-icons: true;

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

I compiled this on a Linux server. Not sure if this is the best way to do it, but I managed to get my css file saved as resources/css/sencha-touch.css.

[kevinv1990]

Hey thanks both for replying

I did end up using the sass folder the sencha touch crew made for us, but i did get my own folder working too! So for that thanks a lot, first I did not really understand the ".." in the config file, this sounds maybe stupid but I really didn't understand, now i know it's just one folder higher up ^^ thx for the image.

Greetz