Need some urgent help with SASS please...

[sandor]

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:

@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).

// 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,

[davidkaneda]

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

[sandor]

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

[davidkaneda]

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-

[sandor]

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

[davidkaneda]

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

[sandor]

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:

@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:

// 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,