SASS Config Errors Right Out of Box

[markwyner]

Hello,

I have spent a number of hours trying to get the Sencha Touch SASS setup properly and researching errors herein the forum and elsewhere. But I can't reach the first step in customization because of a sea of errors. And I really want to use SASS. I use it on other projects and it works great.

I would assume that simply downloading Sencha Touch and putting the /resources directory in my project directory would work out of the box. Alas, it does not. I have read Sencha's popular theming blog-post and subsquently changed the config.rb accordingly, yet that also throws errors.

My project directory looks like this:



My config.rb file looks like this:

sass_path = File.dirname(__FILE__)
css_path = File.join(sass_path, '..', 'css')
images_dir = File.join(sass_path, '..', 'themes', 'images')
load File.join(sass_path, '..', 'themes')
output_style = :compressed
environment = :production

My sencha-touch.scss file looks like this:

@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;

The error I receive when I begin watching with SASS looks like this:

WARNING: Neither sencha-touch/default/all.sass nor .scss found. Using sencha-touch/default/all.css instead.
This behavior is deprecated and will be removed in a future version.
If you really need sencha-touch/default/all.css, import it explicitly.

And, finally, if I begin to edit sencha-touch.scss I get an error that looks like this:

error /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss (Line 4: Undefined mixin 'sencha-panel'.)

And the sencha-touch.css file then begins like this:

Syntax error: Undefined mixin 'sencha-panel'.
on line 4 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/sencha-touch.scss, in `sencha-panel'
from line 4 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/sencha-touch.scss
…
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Syntax error: Undefined mixin 'sencha-panel'.\A         on line 4 of /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss, in `sencha-panel'\A         from line 4 of /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss\A \A 1: $base-color: #333;\A 2: @import 'sencha-touch/default/all';\A 3: \A 4: @include sencha-panel;\A 5: @include sencha-buttons;\A 6: @include sencha-sheet;\A 7: @include sencha-picker;\A 8: @include sencha-tabs;\A 9: @include sencha-toolbar;"; }

Any help will be greatly appreciated. I would truly love any solid answer for this problem and am certain many others would benefit as well. It seems this is a common issue for people.

Thanks so much in advance.

[tonin10]

hello,
http://www.sencha.com/forum/showthre...r-mvc-and-scss
bottom you have scss install
hope it's help you

[markwyner]

Thanks, tonin10. However, I didn't follow half of what was mentioned in that thread. Also, that doesn't seem like a solution out of the box. You and others listed all kinds of crazy modifications.

There must be a way to download Sencha Touch and have the SASS setup work. There is no real documentation other than the blog post I mentioned, and it doesn't work as suggested.

I'd love it if someone who truly understands the Sencha Touch to weigh in on this. SASS is awesome, as is how Sencha Touch uses it, but there is no usable documentation for setting it up properly.

Having some reliable information about this would greatly benefit the entire Sencha Touch community. I'll even post something comprehensive which can be resourced if I can get some help here. I'd love for a solution to be easily accessible to anyone learning to use SASS within this framework.

Thanks so much in advance!

[tonin10]

I totally agree with you, but not finding how to fix the errors, I use this method

[markwyner]

Yeah, but even beyond the errors the Sencha blog examples and even the setup in the 1.0.1a download simply doesn't work. Nothing enables the use of SASS as suggested. The errors are fatal.

There must be a way to make this work. But unfortunately it's not as simple as the documentation leads you to believe.

Sencha Touch developers, this is a weakness in documentation for your otherwise exceptional framework. I'd love to see a solid reply to this thread with some clarification. Without intimate knowledge of Sencha Touch's SASS/CSS resources and Ruby the setup is simply too complex. Even for someone like myself who is using SASS outside of your framework.

Thanks!

[crumley]

I 100% agree. I really want to like this framework but issues like these make it difficult. I am looking forward to the next release.

[markwyner]

I see replies from Sencha developers all over the place, but I can't seem to get attention on this post. There seems to be a few challenges in getting the SASS setup going for a large number of Sencha users. It would be super helpful if someone from Sencha could offer some insight to what I've outlined in this post. So many people want to use SASS with Sencha and we would all be very grateful for some illumination on this.

Any seasoned Sencha users/developers want to help us?

Thanks in advance!

[davidkaneda]

Sorry for the delayed response — we've all been working pretty hard around the clock to get Ext JS 4 out. I'm sure the issue you're running into will be an easy one to fix, the key is in the line:

load File.join(sass_path, '..', 'themes');

In your config.rb. This is what's not working. Note that the '..' represents going up a directory in your system. You basically just need to wayfind from your current SCSS directory up (and then potentially down) to the themes folder located at resources/themes.

Ideally, this is usually done from a custom SCSS file, not in sencha-touch.scss. See the Kiva and GeoCongress apps in the download for an example of what I mean (and be sure to check out their config.rbs).

At this point, you may also want to make sure you're up to date with Compass/SASS by running: 'sudo gem install compass' again.

Hope that helps,
Dave

[markwyner]

Sorry for the delayed response…

Understood, David. Congratulations on the new Ext JS release. I'm sure you were all very much under the gun on that.

I'm sure the issue you're running into will be an easy one to fix...

Well I really wish that was the case, but it wasn't. Though I did figure it out.

I have posted a full solution in the "examples and showcases" area of the forum in hopes that everyone experiencing this problem will be able to ease their pain in setting up the Compass/SASS/Sencha-Touch system. After all, that's an important part of what makes Sencha Touch awesome:

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

[davidkaneda]

We are working on the docs there, but you've listed a few things in that post that I totally just overlooked for newcomers, so I definitely appreciate the viewpoint. Hopefully you're comfortable with it now, we may have a contest coming soon that will test those skills...