1. #1
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default Compass / SASS questions?

    Compass / SASS questions?


    Not sure where to post Compass/SASS questions so let me know if there is a better place for this:

    Trying to create an application.css file for my new Touch app...getting compass compile error about not finding the mixin 'sencha-panel' ...but really I think it can't find any of them. So probably don't have the config.rb setup properly, or I am completely missing the boat on something else.

    I copied the whole resources dir 1.0.2 to a client specific folder off the root of c: (c:\themes\myclient\resources). So that file has all the directories and files from Touch resources dir.

    I then cleaned out the resources\sass dir and placed my own config.rb and application.scss files in there, adjusted to my needs. These look like the following:

    config.rb
    Code:
    # Delineate the directory for our SASS/SCSS files (this directory)
    sass_path = File.dirname(__FILE__)
     
    # Delineate the CSS directory (under resources/css in this demo)
    css_path = File.join(sass_path, "..", "css")
     
    # Delinate the images directory
    images_dir = File.join(sass_path, "..", "img")
     
    # Load the sencha-touch framework
    load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')
     
    # Specify the output style and environment
    # For production use: :compressed
    # For debug use: :expanded
    output_style = :expanded
    environment = :production
    application.scss
    Code:
    // Variable overrides
    $base-color: #00275E;
    
    // Options: ‘matte’, ‘bevel’, ‘glossy’, ‘recessed’, and ‘flat’.
    $base-gradient: 'glossy';
     
    // Include Sencha Touch styles
    //@import 'sencha-touch/default/all';
    @include sencha-panel;
    @include sencha-buttons;
    @include sencha-sheet;
    @include sencha-picker;
    @include sencha-toolbar-forms;
    @include sencha-tabs;
    @include sencha-toolbar;
    @include sencha-carousel;
    @include sencha-indexbar;
    @include sencha-list;
    @include sencha-layout;
    @include sencha-form;
    @include sencha-loading-spinner;
    
    
    // Custom controls
    @include sencha-button-ui('yellow', #FEB729, 'glossy');
    @include sencha-toolbar-ui('aqua', #6D98AB, 'glossy');
    Then, from the scss directory at the command line I run "compass compile" and I get the error:
    "error application.scss <line 9: Undefined mixin 'sencha-panel'.> Sass:: Syntax error on line ["9"] of C: Undefined mixin 'sencha-panel'."

    What am I doing wrong?

  2. #2
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247
    Vote Rating
    0
    gcallaghan is on a distinguished road

      0  

    Default


    Looks like when you moved the Sencha css you moved the rerference to the sencha files. so now when you try to include ANY sencha-* compass will not be able to find them.

    I have my project set up like this.

    ...
    # my project specific config
    myProjectBaseDir/resources/scss/config.rb
    # location of sencha 1.0.1 includes; docs, resources, examples, etc.
    myProjectBaseDir/media/sencha/
    ...

    config.rb:
    Code:
    sass_path = File.dirname(__FILE__)
    css_path = File.join(sass_path,'..','..','media','css')
    images_dir = File.join(sass_path,'..','..','media','sencha','resources','themes','images','default','pictos')
    load File.join(sass_path,'..','..','media','sencha','resources','themes')
    
    output_Style = :expanded
    environemnt = :developmen
    my guess is your going to have to change
    Code:
    # Delinate the images directory
    images_dir = File.join(sass_path, "..", "img")
     
    # Load the sencha-touch framework
    load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')
    to point to the location of the sencha folder

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Thanks @gcallaghan for the response, don't get many of those in the Touch forum.

    As powerful as this technology is, the directions for setting it up are pretty weak. In any event, I kinda neglected to mention that this was on a Windoze box, not that it matters. This guys article did the trick for me. I would also recommend that instead of using the config.rb in the theming article (or this article), I would copy the config.rb in Sencha's sass directory to your scss directory that you create at the same level. That way I think you are more likely to not have any pathing issues in case Sencha makes dir changes from when these articles are written.

    Anyway, thanks again for the repsonse, appreciate it

Similar Threads

  1. Styling, Compass and SASS (0.94)
    By SimonFlack in forum Sencha Touch 1.x: Discussion
    Replies: 11
    Last Post: 7 Jan 2011, 2:08 PM
  2. After using SASS/Compass Apple devices use Times as font
    By estesbubba in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 10 Dec 2010, 12:22 PM
  3. Animated 3D Compass
    By tvpittner in forum Sencha Animator Help & Discussion
    Replies: 3
    Last Post: 16 Nov 2010, 5:55 AM
  4. 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
  5. sass, compass, ruby getting started problems
    By willi in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 9 Sep 2010, 2:06 AM

Thread Participants: 1

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