Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25

Thread: Mastering the Compass/SASS Setup with Sencha Touch

  1. #11
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Hmm, I don't get it. I have everything set up correctly but when i compile I only get the errer message "Nothing to compile. If you're trying to start a new project, you have left off the directory argument."

    I cd into the actual sass directory and the do compass compile. Is that wrong to do?

  2. #12
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    42
    Vote Rating
    6
      0  

    Default

    @markwyner

    you are the effin man! thank u so much for posting this because the worst part of styling sencha touch is just getting everything set up and running.

  3. #13
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
      0  

    Default

    Thanks, dgotty. So glad it helped.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  4. #14
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    715
    Vote Rating
    236
      1  

    Default Brilliant

    Thank you for this post - Had ExtJS setup but was struggling to get Touch theming working - This post helped immensely

    +1

  5. #15
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
      0  

    Default I was getting this error

    Hi all,

    I was getting this error, when I run the code..

    please see the attach file... and reply me asap.
    Attached Images Attached Images

  6. #16
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
      0  

    Default Link to Path

    @chandaboy

    You need to open app.scss and put the correct file path within the very first @import. Read the first post of this thread for details.

  7. #17
    Sencha User
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default Path correction

    When using touch to generate your starting directory

    @import '../sdk/resources/themes/stylesheets/sencha-touch/default/all';

  8. #18
    Sencha User
    Join Date
    Jun 2011
    Location
    Paris
    Posts
    29
    Vote Rating
    4
      1  

    Default

    We made up a very simple tutorial to setup sass and compass on windows 7. Maybe It can help someone here.


    http://one2teamdev.blogspot.fr/2012/08/sass-for-sencha-touch-2-windows-7.html

  9. #19
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    24
      0  

    Default

    For those windows users who might have gotten tripped up - be sure to use forward slashes and not backwards ones. Once I did that, ST 2.1 RC1 worked out of the box without any of the changes mentioned in this thread. I didn't have to fiddle with anything (other than previously installing ruby/sass/etc), just do:

    compass compile project/resources/sass/

  10. #20
    Sencha User
    Join Date
    Sep 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    I've been struggling with this SASS stuff the last few days. I've gone and set up my project just like how the guide says to and everything compiles with compass but my icons don't seem to show up, but my custom colour for buttons does work.

    One thing I've noticed is in my sencha-touch.css is this:

    Code:
    /* line 38, C:/Users/rvoth/Sencha/ClaimApp/assets/resources/sass/../themes/stylesheets/sencha-touch/default/core/../_mixins.scss */
    .x-tab img.home, .x-button img.x-icon-mask.home {
      -webkit-mask-image: theme_image("default", "pictos/home.png");
    }
    In another example, I've seen that webkit-mask-image line have url() and then an already base64 encoded string there.

    My config.rb looks like this:

    Code:
    # Delineates location of the config.rb file which should be in the same directory as your SCSS file(s)
    sass_path = File.dirname(__FILE__)
    
    # Points to the location of the CSS file(s) you'll call from your HTML document
    css_path = File.join(sass_path, '..', 'css')
    
    # Points to the images directory used by the Sencha Touch theme
    images_dir = File.join(sass_path, '..', 'themes', 'images', 'default')
    
    # Points to the Sencha Touch theme
    load File.join(sass_path, '..', 'themes')
    
    # Denotes how the CSS files are compiled by Compass
    output_style = :compressed
    environment = :production
    My sencha-touch.scss:

    Code:
    @import '../themes/stylesheets/sencha-touch/default/all';
        
    @include sencha-panel;
    @include sencha-buttons;
    @include sencha-sheet;
    @include sencha-picker;
    @include sencha-tabs;
    @include sencha-toolbar;
    @include sencha-toolbar-forms;
    @include sencha-indexbar;
    @include sencha-list;
    @include sencha-list-paging;
    @include sencha-list-pullrefresh;
    @include sencha-layout;
    @include sencha-carousel;
    @include sencha-form;
    @include sencha-msgbox;
    @include sencha-loading-spinner;
    
    @include pictos-iconmask('add');
    @include pictos-iconmask('team');
    @include pictos-iconmask('compose'); 
    @include pictos-iconmask('info');
    @include pictos-iconmask('star');
    @include pictos-iconmask('more'); 
    @include pictos-iconmask('user');
    @include pictos-iconmask('home');
    Here's an image of my folder structure: http://i.imgur.com/KBkOQ.png

    Everything looks right to me. The only thing that I can possibly think of is that we're using sencha-touch-1.1.1, would it possibly have something to do with not being version 2?

    Edit: Figured this out myself. If anybody did what I did, make sure you're using the .css files from the /css/ folder and not the /stylesheets/ folder (if you have one in your /resources/ folder. Apparently that was added in by accident.

Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. How to use sencha touch css in SASS
    By kevinv1990 in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 3 Mar 2011, 12:58 AM
  2. SASS & Sencha Touch: how do I apply a gradient to a pressed list item?
    By bklaas in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 26 Feb 2011, 1:30 PM
  3. Compass / SASS questions?
    By Bucs in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 17 Feb 2011, 8:37 PM
  4. more info about themes and sass in sencha touch?
    By RobinQu in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 21 Dec 2010, 10:21 AM
  5. Compass SASS - How to in 0.96 ?
    By emroot in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 8 Oct 2010, 7:53 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •