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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar