使用 SASS 更改 sencha 工具栏中按钮的活动颜色

Question

我正在寻找更改我的按钮颜色和 sencha 工具栏中按钮的活动颜色。在学习了一些教程后，我得到了这个。

我的示例 sass 代码：

@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');
        }
      }
    }

使用 Compass 编译代码时出现以下错误：

    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

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

@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);
        }
    }
}