1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    5
    Vote Rating
    0
    theRemix is on a distinguished road

      0  

    Default Theming tutorial, compiling sass/scss help please?

    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

    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>
    to compile sass, i think i need to only run "compass" from within the scss directory that the tutorial speaks of. config.rb:
    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
    output:
    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
    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.

    any assistance in getting this to work would be greatly appreciated.
    @include pictos-iconmask(‘wifi’);
    Last edited by theRemix; 28 Mar 2011 at 1:53 AM. Reason: typo

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    5
    Vote Rating
    0
    theRemix is on a distinguished road

      0  

    Default


    also, i have these:

    Code:
    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 :/

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    5
    Vote Rating
    0
    theRemix is on a distinguished road

      0  

    Default


    :bump:

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

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    5
    Vote Rating
    0
    theRemix is on a distinguished road

      0  

    Default fixed

    fixed


    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)
    Code:
    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)

    Code:
    sudo gem install chunky_png
    Fetching: chunky_png-1.1.0.gem (100%)
    Successfully installed chunky_png-1.1.0
    1 gem installed
    Code:
    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

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

Similar Threads

  1. Replies: 1
    Last Post: 24 Feb 2011, 9:57 PM
  2. Pushing the SASS theming envelope
    By bklaas in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 22 Feb 2011, 8:02 AM
  3. SASS Compiling Green All the time
    By gary7au in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 16 Dec 2010, 3:42 AM
  4. Compiling SASS files into one css file
    By Acsm in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 13 Sep 2010, 1:57 PM

Tags for this Thread