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

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

1 个答案: