Compass / SASS questions?

[Bucs]

Not sure where to post Compass/SASS questions so let me know if there is a better place for this:

Trying to create an application.css file for my new Touch app...getting compass compile error about not finding the mixin 'sencha-panel' ...but really I think it can't find any of them. So probably don't have the config.rb setup properly, or I am completely missing the boat on something else.

I copied the whole resources dir 1.0.2 to a client specific folder off the root of c: (c:\themes\myclient\resources). So that file has all the directories and files from Touch resources dir.

I then cleaned out the resources\sass dir and placed my own config.rb and application.scss files in there, adjusted to my needs. These look like the following:

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, "..", "img")
 
# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')
 
# Specify the output style and environment
# For production use: :compressed
# For debug use: :expanded
output_style = :expanded
environment = :production

application.scss

// Variable overrides
$base-color: #00275E;

// Options: ‘matte’, ‘bevel’, ‘glossy’, ‘recessed’, and ‘flat’.
$base-gradient: 'glossy';
 
// Include Sencha Touch styles
//@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;


// Custom controls
@include sencha-button-ui('yellow', #FEB729, 'glossy');
@include sencha-toolbar-ui('aqua', #6D98AB, 'glossy');

Then, from the scss directory at the command line I run "compass compile" and I get the error:
"error application.scss <line 9: Undefined mixin 'sencha-panel'.> Sass:: Syntax error on line ["9"] of C: Undefined mixin 'sencha-panel'."

What am I doing wrong?

[gcallaghan]

Looks like when you moved the Sencha css you moved the rerference to the sencha files. so now when you try to include ANY sencha-* compass will not be able to find them.

I have my project set up like this.

...
# my project specific config
myProjectBaseDir/resources/scss/config.rb
# location of sencha 1.0.1 includes; docs, resources, examples, etc.
myProjectBaseDir/media/sencha/
...

config.rb:

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 = :developmen

my guess is your going to have to change

# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")
 
# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')

to point to the location of the sencha folder

[Bucs]

Thanks @gcallaghan for the response, don't get many of those in the Touch forum.

As powerful as this technology is, the directions for setting it up are pretty weak. In any event, I kinda neglected to mention that this was on a Windoze box, not that it matters. This guys article did the trick for me. I would also recommend that instead of using the config.rb in the theming article (or this article), I would copy the config.rb in Sencha's sass directory to your scss directory that you create at the same level. That way I think you are more likely to not have any pathing issues in case Sencha makes dir changes from when these articles are written.

Anyway, thanks again for the repsonse, appreciate it