PDA

View Full Version : Theming tutorial, compiling sass/scss help please?



theRemix
28 Mar 2011, 1:52 AM
Hi everyone,

i'm following this tutorial http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/
and all i really want to do is add/change a bytton icon. so what i gather is, the png files in /www/lib/touch/resources/themes/images/default/pictos/ are "read" by sass and cached as css or something, and the pngs are never used by sencha/js. so replacing the .png file does nothing!!!... until i recompile the sass/scss

so i go to /www/lib/touch/resources/sass and run compass compile

i'm on osx, deploying with phonegap, Haml/Sass 3.1.79 (Bleeding Edge)

can someone please instruct me on the correct way to compile these scss/sass files?

tutorial says to run "compass compile"
this seems to only create a new compass project


compass compile
Loading haml-edge gem.
directory compile/
directory compile/src/
directory compile/stylesheets/
create compile/config.rb
create compile/src/screen.sass
create compile/src/print.sass
create compile/src/ie.sass
exists compile/stylesheets
compile compile/src/ie.sass
create compile/stylesheets/ie.css
compile compile/src/print.sass
create compile/stylesheets/print.css
compile compile/src/screen.sass
DEPRECATION WARNING:
On line 83, character 3 of '/Users/theRemix/.gem/ruby/1.8/gems/compass-0.8.17/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass'
Setting properties with = has been deprecated and will be removed in version 3.2.
Use "color: black" instead.

You can use `sass-convert --in-place --from sass2 file.sass' to convert files automatically.

DEPRECATION WARNING:
On line 124, character 18 of '/Users/theRemix/.gem/ruby/1.8/gems/compass-0.8.17/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass'
Variables with ! have been deprecated and will be removed in version 3.2.
Use "$selector" instead.

You can use `sass-convert --in-place --from sass2 file.sass' to convert files automatically.

DEPRECATION WARNING:
On line 124, character 27 of '/Users/theRemix/.gem/ruby/1.8/gems/compass-0.8.17/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass'
Setting mixin argument defaults with = has been deprecated and will be removed in version 3.2.
Use "$selector: """ instead.

You can use `sass-convert --in-place --from sass2 file.sass' to convert files automatically.

DEPRECATION WARNING:
On line 124, character 33 of '/Users/theRemix/.gem/ruby/1.8/gems/compass-0.8.17/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass'
Setting mixin argument defaults with = has been deprecated and will be removed in version 3.2.
Use "$important: false" instead.

You can use `sass-convert --in-place --from sass2 file.sass' to convert files automatically.

DEPRECATION WARNING:
On line 125, character 47
Variables with ! have been deprecated and will be removed in version 3.2.
Use "$selector" instead.

You can use `sass-convert --in-place --from sass2 file.sass' to convert files automatically.

DEPRECATION WARNING:
On line 130, character 46
Variables with ! have been deprecated and will be removed in version 3.2.
Use "$selector" instead.

You can use `sass-convert --in-place --from sass2 file.sass' to convert files automatically.

create compile/stylesheets/screen.css

Congratulations! Your compass project has been created.
You must recompile your sass stylesheets when they change.
This can be done in one of the following ways:
1. From within your project directory run:
compass
2. From any directory run:
compass -u path/to/project
3. To monitor your project for changes and automatically recompile:
compass --watch [path/to/project]

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
to compile sass, i think i need to only run "compass" from within the scss directory that the tutorial speaks of. config.rb:

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

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

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
images_dir = File.join(dir, "..", "img")

environment = :production
output_style = :compressedoutput:

Loading haml-edge gem.
LoadError on line 5 of /ios/www/lib/touch/resources/scss/config.rb: no such file to load -- /ios/www/lib/touch/resources/scss/../themes
Run with --trace to see the full backtracewhich does exist, and the ../themes/compass_init.rb file exists, which i'm guessing the magic is gone? not too sure, i'm not experienced with sass/scss.

any assistance in getting this to work would be greatly appreciated.
@include pictos-iconmask(‘wifi’);

theRemix
28 Mar 2011, 2:03 AM
also, i have these:



haml (3.0.25, 2.2.24, 2.2.20, 2.2.16)
haml-edge (3.1.79, 2.3.163, 2.3.100)



and i'm not sure how to use compass with a specific older gem version, i'd like to test them all to see if i can compass --update the scss files :/

theRemix
30 Mar 2011, 12:42 AM
:bump:

i still need help. has anyone ever figured out how to use custom icons with sencha touch?

theRemix
30 Mar 2011, 2:19 AM
ok i figured out what was wrong.

i haven't found the sencha touch compass gem version requirements so here's how i got it to work.

this is what i HAD (and did not work)

haml (3.0.25, 2.2.24, 2.2.20, 2.2.16)
haml-edge (3.1.79, 2.3.163, 2.3.100)


i removed all of haml-edge, sass and compass gems (clean slate)

here's what i installed (osx)


sudo gem install chunky_png
Fetching: chunky_png-1.1.0.gem (100%)
Successfully installed chunky_png-1.1.0
1 gem installed


sudo gem install compass --pre
Fetching: sass-3.1.0.alpha.252.gem (100%)
Fetching: compass-0.11.beta.5.gem (100%)
Successfully installed sass-3.1.0.alpha.252
Successfully installed compass-0.11.beta.5
2 gems installed

then it worked as expected


$compass compile
overwrite ../css/android.css
overwrite ../css/apple.css
overwrite ../css/bb6.css
overwrite ../css/sencha-touch.css