Hybrid View

  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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi