1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190
    Vote Rating
    0
    kevinv1990 is on a distinguished road

      0  

    Default How to use sencha touch css in SASS

    How to use sencha touch css in SASS


    Hello all,

    I have been experimenting with SASS this midday, it's really cool and i like it a lot.

    Now i want to style using the sencha touch css as base, I did read the:
    http://www.sencha.com/blog/an-introd...g-sencha-touch
    blog post. Now i wanted to try out those demo's at the end of the blog, but i can't succeed, i had the sass example with the 3 buttons working, but this is a little too difficult for me

    I get the following error when i startup my app: syntax error: undefined mixin 'sencha-panel'.

    on line 21 of d:/users/..... in 'sencha-panel'
    from line 21 of d:/.../../screen.scss


    this is my code:

    Code:
    @import 'compass/css3';
    
    $base-color: #7c92ae;
    $base-gradient: 'glossy';
    
    // Lists
    $list-active-gradient: 'bevel';
    $list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
    $list-header-gradient: 'matte';
    
    // Tabs
    $tabs-dark: #111;
    
    @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;

    I did NOT edit any other thing in the folder created by compass, so the config.rb is unchanged.

    Any help would be appreciated.

    Greetz,
    Kevin Vermaat

  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


    Did you move the files? can you post a pwd of where your application.scss is located and where your sencha folder is located?

    If you have your own config.rb you need to make sure it references where the sencha files are.
    For instance, I have my scss and config.rb located in
    <MyProjectDir>/resources/scss
    and the sencha library located in...
    <MyProjectDir>/media/sencha
    so my config.rb looks like...
    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 = :development

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190
    Vote Rating
    0
    kevinv1990 is on a distinguished road

      0  

    Default


    Hey thx a lot for the response ,

    Okay that is the problem, I did not reference to my Sencha touch files! One last quick question, let's say that I have my Sencha files at : C:\Program Files\Sencha\[here the ST files] and my ruby config file C:\Program Files\Ruby\Project1\config.rb.

    How would my config.rb look like?

    Sorry to ask you but this all is really new to me, so if someone knows, i would thank you a lot

    Greetz
    Kevin

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Location
    Bucharest, Romania
    Posts
    9
    Vote Rating
    0
    alexandra.ac is on a distinguished road

      0  

    Default


    @kevinv1990

    Hi,

    I'm also new to Sencha Touch and struggled with the theming until I got the paths right. This is how my folders are structured:

    folder_structure.jpg

    I basically moved the sencha-touch folder from themes/stylesheets into the sass folder.

    Here is the config file (sass/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, "..", "themes","images")
     
    # Load the sencha-touch framework
    load File.join(sass_path, '..', 'themes')
     
    # Specify the output style/environment
    #output_style = :expanded
    output_style = :compressed
    environment = :production
    and the scss file (sass/sencha-touch.scss) :

    Code:
    $body-bg-color: #000000;
    $base-color: #333333;
    $active-color: #ffffff;
    $base-gradient: 'glossy';
     
    $include-default-icons: true;
    
    @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;
    @include sencha-msgbox;
    @include sencha-picker;
    I compiled this on a Linux server. Not sure if this is the best way to do it, but I managed to get my css file saved as resources/css/sencha-touch.css.

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    190
    Vote Rating
    0
    kevinv1990 is on a distinguished road

      0  

    Default thx !

    thx !


    Hey thanks both for replying

    I did end up using the sass folder the sencha touch crew made for us, but i did get my own folder working too! So for that thanks a lot, first I did not really understand the ".." in the config file, this sounds maybe stupid but I really didn't understand, now i know it's just one folder higher up ^^ thx for the image.

    Greetz

Similar Threads

  1. Replies: 10
    Last Post: 20 Jan 2012, 10:10 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. 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
  4. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM

Thread Participants: 2