Help with theming!

[DavidGillespie]

Hi i am fairly new to Sencha Touch, yet embarked to use sencha for my 4th year project in Uni. I have the basic application working yet i am having difficulties in actually themeing it. I have set up a new scss folder in resources and set up a config.rb file as

# 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, "..", "img")

# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')

# Specify the output style/environment
output_style = :compressed
environment = :production

and my scss file is

// 1. Variable overrides, example:
// $base-color: #af2584;

// 2. Include Sencha Touch styles
@import 'u:\sencha\resources\themes\stylesheets\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;

// 3. Define custom styles (can use SASS/Compass), example:
// .mybox {
//     @include border-radius(4px);
// }

When i go to compile this i get the error

    error myapp.scss (Line 24: Undefined mixin 'background-image'.)
Sass::SyntaxError on line ["24"] of u: Undefined mixin 'background-image'.
Run with --trace to see the full backtrace

I dont know if i need to install anything else(blueprint). Any help would be amazing!

Dave

[markwyner]

Hey, David.

I ran into huge walls while trying to make progress with the theming. After I figured out where the holes were I created a comprehensive post which covers solutions for most of those challenges:

http://www.sencha.com/forum/showthre...h-Sencha-Touch

I hope that helps.

[Nicodemuz]

I'm getting the same error after I started using the latest version of Sencha Touch (1.1.0). Were you able to find a solution to this problem?

[markwyner]

@DavidGillespie and Nicodemuz:

I found the line in question in /resources/themes/stylesheets/sencha-touch/default/_mixins.scss:

@include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%))));

@Nicodemuz:

You're absolutely correct. This is a 1.1 issue. Though it's not the same error I received. I updated yesterday but didn't run a watch on my sass directory. I just now tried and got this error:

NoMethodError on line 9 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/../themes/lib/theme_images.rb: undefined method `inline_image_string' for #<Sass::Script::Functions::EvaluationContext:0x1011f6bc8>

When I reverted to 1.0.1a and ran a watch I received no errors. Line 9 of theme_images.rb reads:

inline_image_string(data(real_path), compute_mime_type(path, mime_type))

So whatever they did here to update that config is throwing things off. I'm not very familiar with Ruby but I do know this is a function. And a global find for inline_image_string in the entire 1.1 download produces no other match than the one in this config file. So I'm not sure what it does.

Regarding the error you both received with the undefined mixin, that's what I experienced from having incorrect paths to the source files for the Sencha Touch theme's CSS. That's why I pointed to my post.

[rlegend]

From this post.

$ gem install chunky_png
$ gem install compass --pre