extjs 4主题如何使用全局变量来创建自定义组件(extjs 4 themes how to use global variables to create custom components)

 我正在尝试为ExtJS 4创建一个自定义主题，这个主题更加复杂，只需更改基本颜色即可。 所以这可能是一个关于SASS而不是主题本身的问题。 
 
 ExtJS为其所有组件声明了mixins，但对于其中的许多组件，mixin没有参数。 
 
@mixin extjs-menu {
  .#{$prefix}menu-body {
      @include no-select;
      background: $menu-background-color !important;
      padding: $menu-padding;
  }
  ...
}
 
 例如，这是菜单mixin。 正如你所看到的，他们没有使用mixin参数; 相反，他们正在使用影响所有菜单的全局变量。 
 
 所以要修改这个组件，我做了以下工作： 
 
$menu-background-color: red;
@include ext-menu
 
 但是当你在你的应用中有几个菜单，并且你想为每个菜单寻找不同的外观时会发生什么。 有任何想法吗？ 
 
 我的想法是用我的改变创建一个mixin并调用ext菜单的mixin，但我不确定在mixin中声明$menu-background-color: red会不会影响全局变量。 

I'm trying to create a custom theme for ExtJS 4, more complex that just changing the base color. So probably this is more a question about SASS than the theme itself.
 
ExtJS declares mixins for all its components, but for many of these the mixin has no parameters.
 
@mixin extjs-menu {
  .#{$prefix}menu-body {
      @include no-select;
      background: $menu-background-color !important;
      padding: $menu-padding;
  }
  ...
}
 
For example, this is the menu mixin. As you can see, they are not using mixin parameters; instead, they are using the global variables that affect all menus.
 
So to modify this component I was doing the following:
 
$menu-background-color: red;
@include ext-menu
 
But what happens when you have several menus in your app and you want different looks for each. Any ideas?
 
My idea was to create a mixin with my changes and call the ext-menu mixin, but I'm not sure if declaring $menu-background-color: red inside the mixin will affect the global variable or not.

原文：https://stackoverflow.com/questions/12100609