1. #1
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default SASS Config Errors Right Out of Box

    SASS Config Errors Right Out of Box


    Hello,

    I have spent a number of hours trying to get the Sencha Touch SASS setup properly and researching errors herein the forum and elsewhere. But I can't reach the first step in customization because of a sea of errors. And I really want to use SASS. I use it on other projects and it works great.

    I would assume that simply downloading Sencha Touch and putting the /resources directory in my project directory would work out of the box. Alas, it does not. I have read Sencha's popular theming blog-post and subsquently changed the config.rb accordingly, yet that also throws errors.

    My project directory looks like this:



    My config.rb file looks like this:

    Code:
    sass_path = File.dirname(__FILE__)
    css_path = File.join(sass_path, '..', 'css')
    images_dir = File.join(sass_path, '..', 'themes', 'images')
    load File.join(sass_path, '..', 'themes')
    output_style = :compressed
    environment = :production
    My sencha-touch.scss file looks like this:

    Code:
    @import '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-carousel;
    @include sencha-indexbar;
    @include sencha-list;
    @include sencha-layout;
    @include sencha-form;
    @include sencha-msgbox;
    @include sencha-loading-spinner;
    The error I receive when I begin watching with SASS looks like this:

    Code:
    WARNING: Neither sencha-touch/default/all.sass nor .scss found. Using sencha-touch/default/all.css instead.
    This behavior is deprecated and will be removed in a future version.
    If you really need sencha-touch/default/all.css, import it explicitly.
    And, finally, if I begin to edit sencha-touch.scss I get an error that looks like this:

    Code:
    error /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss (Line 4: Undefined mixin 'sencha-panel'.)
    And the sencha-touch.css file then begins like this:

    Code:
    Syntax error: Undefined mixin 'sencha-panel'.
    on line 4 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/sencha-touch.scss, in `sencha-panel'
    from line 4 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/sencha-touch.scss
    …
    body:before {
      white-space: pre;
      font-family: monospace;
      content: "Syntax error: Undefined mixin 'sencha-panel'.\A         on line 4 of /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss, in `sencha-panel'\A         from line 4 of /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss\A \A 1: $base-color: #333;\A 2: @import 'sencha-touch/default/all';\A 3: \A 4: @include sencha-panel;\A 5: @include sencha-buttons;\A 6: @include sencha-sheet;\A 7: @include sencha-picker;\A 8: @include sencha-tabs;\A 9: @include sencha-toolbar;"; }
    Any help will be greatly appreciated. I would truly love any solid answer for this problem and am certain many others would benefit as well. It seems this is a common issue for people.

    Thanks so much in advance.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    hello,
    http://www.sencha.com/forum/showthre...r-mvc-and-scss
    bottom you have scss install
    hope it's help you

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Thanks, tonin10. However, I didn't follow half of what was mentioned in that thread. Also, that doesn't seem like a solution out of the box. You and others listed all kinds of crazy modifications.

    There must be a way to download Sencha Touch and have the SASS setup work. There is no real documentation other than the blog post I mentioned, and it doesn't work as suggested.

    I'd love it if someone who truly understands the Sencha Touch to weigh in on this. SASS is awesome, as is how Sencha Touch uses it, but there is no usable documentation for setting it up properly.

    Having some reliable information about this would greatly benefit the entire Sencha Touch community. I'll even post something comprehensive which can be resourced if I can get some help here. I'd love for a solution to be easily accessible to anyone learning to use SASS within this framework.

    Thanks so much in advance!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    I totally agree with you, but not finding how to fix the errors, I use this method

  5. #5
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Yeah, but even beyond the errors the Sencha blog examples and even the setup in the 1.0.1a download simply doesn't work. Nothing enables the use of SASS as suggested. The errors are fatal.

    There must be a way to make this work. But unfortunately it's not as simple as the documentation leads you to believe.

    Sencha Touch developers, this is a weakness in documentation for your otherwise exceptional framework. I'd love to see a solid reply to this thread with some clarification. Without intimate knowledge of Sencha Touch's SASS/CSS resources and Ruby the setup is simply too complex. Even for someone like myself who is using SASS outside of your framework.

    Thanks!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  6. #6
    Sencha User
    Join Date
    Dec 2010
    Posts
    7
    Vote Rating
    0
    crumley is on a distinguished road

      0  

    Default


    I 100% agree. I really want to like this framework but issues like these make it difficult. I am looking forward to the next release.

  7. #7
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    I see replies from Sencha developers all over the place, but I can't seem to get attention on this post. There seems to be a few challenges in getting the SASS setup going for a large number of Sencha users. It would be super helpful if someone from Sencha could offer some insight to what I've outlined in this post. So many people want to use SASS with Sencha and we would all be very grateful for some illumination on this.

    Any seasoned Sencha users/developers want to help us?

    Thanks in advance!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  8. #8
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    Sorry for the delayed response — we've all been working pretty hard around the clock to get Ext JS 4 out. I'm sure the issue you're running into will be an easy one to fix, the key is in the line:

    load File.join(sass_path, '..', 'themes');

    In your config.rb. This is what's not working. Note that the '..' represents going up a directory in your system. You basically just need to wayfind from your current SCSS directory up (and then potentially down) to the themes folder located at resources/themes.

    Ideally, this is usually done from a custom SCSS file, not in sencha-touch.scss. See the Kiva and GeoCongress apps in the download for an example of what I mean (and be sure to check out their config.rbs).

    At this point, you may also want to make sure you're up to date with Compass/SASS by running: 'sudo gem install compass' again.

    Hope that helps,
    Dave

  9. #9
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    Sorry for the delayed response…
    Understood, David. Congratulations on the new Ext JS release. I'm sure you were all very much under the gun on that.

    I'm sure the issue you're running into will be an easy one to fix...
    Well I really wish that was the case, but it wasn't. Though I did figure it out.

    I have posted a full solution in the "examples and showcases" area of the forum in hopes that everyone experiencing this problem will be able to ease their pain in setting up the Compass/SASS/Sencha-Touch system. After all, that's an important part of what makes Sencha Touch awesome:

    http://www.sencha.com/forum/showthre...h-Sencha-Touch
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  10. #10
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    We are working on the docs there, but you've listed a few things in that post that I totally just overlooked for newcomers, so I definitely appreciate the viewpoint. Hopefully you're comfortable with it now, we may have a contest coming soon that will test those skills...

Similar Threads

  1. Compass / SASS questions?
    By Bucs in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 17 Feb 2011, 8:37 PM
  2. Need some urgent help with SASS please...
    By sandor in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 22 Nov 2010, 3:14 AM
  3. 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
  4. How can I compile css using sass?
    By meshulro in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 29 Sep 2010, 2:28 PM
  5. Is SASS the direction for CSS in Ext JS 4.0?
    By stever in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 26 May 2010, 7:30 AM

Thread Participants: 3

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