1. #11
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    DonSanto is on a distinguished road

      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 User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      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
    markwyner is on a distinguished road

      0  

    Default


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

  4. #14
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    447
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      1  

    Default Brilliant

    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
    chandaboy is on a distinguished road

      0  

    Default I was getting this error

    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

  6. #16
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    JumpSlash is on a distinguished road

      0  

    Default Link to Path

    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
    mfogarty is on a distinguished road

      0  

    Default Path correction

    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
    ronan quillevere is on a distinguished road

      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
    21
    jep will become famous soon enough jep will become famous soon enough

      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
    rvoth is on a distinguished road

      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.

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

Thread Participants: 20

Tags for this Thread