sencha-touch - Changing the active colors of the buttons in toolbar in sencha using SASS

Question

I'm looking to change my button colors and active colors of buttons in toolbar in sencha. After following some tutorial i got this.

My sample sass code:

@mixin sencha-toolbar-ui('toolbarcolour', #333333,'glossy') {
      $toolbar-border-color: darken(#333333, 50%);
      $toolbar-button-color: darken(#0088CC, 10%);

      .x-toolbar-#{toolbarcolours} {
        @include background-gradient(#333333, 'glossy');

        .x-toolbar-title {
          @include color-by-background(#FFFFFF);
          @include bevel-by-background(#FFFFFF);
        }

        .x-button, .x-field-select .x-input-text, .x-field-select:before {
          @include toolbar-button(#0088CC, 'glossy');
        }
      }
    }

When compile the code using Compass I'm getting the following error:

    error app.scss (Line 32: Invalid CSS after "...cha-toolbar-ui(": expected va
    riable (e.g. $foo), was "'toolbarcolour'...")
    Sass::SyntaxError on line ["32"] of D: Invalid CSS after "...cha-toolbar-ui(": e
    xpected variable (e.g. $foo), was "'toolbarcolour'..."
    Run with --trace to see the full backtrace.

Answer 1

mixins 的参数需要命名，它们不能只是值的集合。在这里，我命名了参数并给了它们一个默认值：

@mixin sencha-toolbar-ui($class: toolbarcolour, $color: #333333, $style: glossy) {
    $toolbar-border-color: darken($color, 50%);
    $toolbar-button-color: darken(#0088CC, 10%);

    .x-toolbar-#{$class} {
        @include background-gradient($color, $style);

        .x-toolbar-title {
            @include color-by-background(#FFFFFF);
            @include bevel-by-background(#FFFFFF);
        }

        .x-button, .x-field-select .x-input-text, .x-field-select:before {
            @include toolbar-button(#0088CC, $style);
        }
    }
}