1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default Need some urgent help with SASS please...

    Need some urgent help with SASS please...


    Hey Guys,

    this is driving me crazy. Obviously i am overseeing something evident, but i can not get this mixin to work - no matter what i am doing. This is my code for my _test.scss file:

    Code:
    @import 'compass/css3';
    
    
    // options: flat, blackglossy
    
    
    @mixin background-gradient($bg-color, $type: $base-gradient) {
      background-color: $bg-color;
      @if $include-highlights {
        @if $type == myglossy {
          @include linear-gradient(color_stops(lighten($bg-color, 60%) 0%, lighten($bg-color, 60%) 1%, lighten($bg-color, 50%) 2%, lighten($bg-color, 40%) 10%, lighten($bg-color, 21%) 49%, lighten($bg-color, 0%) 51%, lighten($bg-color, 0%) 100%));
        }
      }
    }
    I am importing the _test.scss in my app.scss just like here, and would like to use the newly declared gradient as my "$base-gradient: 'myglossy';" (line 6).

    Code:
    // vars
    $base-color: #2a2a2a;
    $active-color: #3C545C;
    $complement: #666;
    
    $base-gradient: 'myglossy';
    $include-highlights: true;
    
    // Lists
    $list-active-gradient: 'matte';
    $list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
    $list-header-gradient: 'matte';
    
    // framework and base components
    
    @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;
    
    
    // custom styles
    
    
    @import 'general';
    @import 'toolbars';
    @import 'test';
    No chance. Funnily if i put the declaration for for "myglossy" in my "_mixin.scss" file evrything is working like a charme... Hmmm... any idea?

    Thanks,
    Last edited by sandor; 17 Nov 2010 at 2:08 AM. Reason: fixed typo
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  2. #2
    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


    Try @importing 'test' before you @include the Sencha component CSS.

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    thanks david - but this is not working for me. could be a possible problem that i am defining the same thing --- @mixin background-gradient($bg-color, $type: $base-gradient) --- two times? Once in my test.scss and once it is defined in the Sencha _mixins.scss...
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  4. #4
    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


    Yeah, that's definitely the problem in general. Was hoping that if you placed it in the right place it would just overwrite, but I guess it's not possible... You'll have to target the items you want to style as a CSS rule, and use your own function (renamed). Best-

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    thanks again - was affraid of that :-) So EXTENDING the existing classes (like the background-gradient) will only be possible in the sourcefile _mixins.scss . Good to know that. In this particular case it would be very much work to assign a custom style to all the buttons and bars and stuff...
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  6. #6
    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


    Yeah, sorry about that. Would work with the built in gradients for now, will look at better ways to extend this soon...

  7. #7
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    thanks david :-) A better way for extending the existing styles would be definitely cool. Did you finished your "SenchaTouchThems.pdf" btw? Would be nice to have a more complete version of that stuff available...

    Here is now my actual workflow as an intermediate solution to the problem we was talking about (is a bit hackish, but will ensure that you will not overwrite your settings if the Sencha Touch scss file will change). This example is for extending mixins:

    Step 1: cut out the mixin you want to extend from the _mixins.scss file (in my case the background gradient declarations)
    Step 2: extend your definitions as you like in a new scss file (im my case _test.scss)
    Step 3: important!! put the @import for your custom definitions before the default sencha @import declarations
    Step 4: enjoy your new styling

    Example for custom gradients:

    Code:
    @import 'compass/css3';
    
    // options: matte, bevel, glossy, recessed, blackglossy (blackglossy is an extended feature)
    @mixin background-gradient($bg-color, $type: $base-gradient) {
      background-color: $bg-color;
      @if $include-highlights {
        @if $type == bevel {
          @include linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%)));
        } @else if $type == glossy {
          @include linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%)));
        } @else if $type == recessed {
          @include linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%)));
        } @else if $type == matte {
          @include linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 10%) 2%, darken($bg-color, 7%)));
        } @else if $type == blackglossy {
          @include linear-gradient(color_stops(lighten($bg-color, 60%) 0%, lighten($bg-color, 60%) 1%, lighten($bg-color, 50%) 2%, lighten($bg-color, 40%) 10%, lighten($bg-color, 21%) 49%, lighten($bg-color, 0%) 51%, lighten($bg-color, 0%) 100%));
        }
      }
    }
    Example for the app.scss file:

    Code:
    // vars
    $complement: #666;
    
    $base-color: #2a2a2a;
    $alert-color: red !default;
    $confirm-color: #92cf00 !default; // Green
    $active-color: #00d2ff;
    
    // For list items, toolbars, etc. (acts as min-height)
    $global-row-height: 2.7em !default;
    $include-highlights: true;
    
    // Now you can use your own gradient declaration here!
    
    $base-gradient: 'blackglossy';
    
    // Lists
    $list-active-gradient: 'matte';
    $list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
    $list-header-gradient: 'matte';
    $list-pressed-color: #92cf00;
    $list-active-color: #92cf00;
    
    // extended gradient scss file
    
    @import 'test';
    
    // framework and base components
    
    @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;
    
    
    // custom styles
    @import 'general';
    @import 'toolbars';
    Cheers,
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

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. 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
  3. 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
  4. 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
  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: 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