Theming tutorial, compiling sass/scss help please?
Hi everyone,
i'm following this tutorial http://www.sencha.com/blog/an-introd...-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
to compile sass, i think i need to only run "compass" from within the scss directory that the tutorial speaks of. config.rb:Code: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>
output:Code:# 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 = :compressed
which 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.Code: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 backtrace
any assistance in getting this to work would be greatly appreciated.
@include pictos-iconmask(‘wifi’);
Reply With Quote
