Mastering the Compass/SASS Setup with Sencha Touch

[rajesh_5445]

hi.. tis is really nice i was suffering a lot for 3 days for an error but after reading tis thing i found out thx!!!

[nefis]

you've saved a few days for me!

[Greg Arnott]

I've inherited an interesting project. ST2.0 project built with Architect.

This project was upgraded to 2.1 using the inbuilt functionality of the new Architect.

What this left me with was the original /sdk/resources, /touch/resources, /resources and interestingly another folder ../resources (yes, in parent of app folder) that had another /touch/ folder just for good measure of confusion.

Architect had scattered the working config into a chaotic mess. Found out the old project aliased the styling build from the parent resource folder into the app resources to help with build speeds.

Likewise, I've 15 years in (mostly) front-end development working with majority of frameworks and backends. Untangling this project was becoming a nightmare. This post was a ray of enlightenment and the final piece to solving the gordian knot.

Many thanks.

[Greg Arnott]

How you've altered the import pathing for the sencha touch "compass extension" (http://compass-style.org/help/tutorials/extensions/)

@import 'sencha-touch/default/all';

Firstly, consider this path from the config.rb:

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

Within this directory one finds a file compass_init.rb.

# This file registers the sencha-touch framework with compass
# It's a magic name that compass knows how to find.
dir = File.dirname(__FILE__)
require File.join(dir, 'lib', 'theme_images.rb')


# Include compass-recipes
require File.join(File.dirname(__FILE__), 'vendor', 'compass-recipes', 'config')


Compass::BrowserSupport.add_support('repeating-linear-gradient', 'webkit', 'moz', 'o', 'ms')
Compass::Frameworks.register 'sencha-touch', dir

The important points:

• "sencha-touch" becomes a registered framework extension for this project.
• images you've hard referenced via your config.rb file are originally included by this compass_init.rb and its referenced /themes/lib/theme_images.rb file.
• using as a framework extension makes "@import 'sencha-touch/default/all';" also work, and not require modification.

@markwyner's original post is very helpful for understanding the development structure of the compass/sass element of touch. One should read the linked page at the top of my message on compass extensions as well as compass configuration (http://compass-style.org/help/tutori...ion-reference/) before making multiple changes to their config.rb file.

[minaxiarya]

Hello,

when I use the command compass compile It get the error

Line 23 of _button.scss: Undefined variable: "$base-gradient".

I have defined the variable "$base-gradient" in scss file.