css - Extjs 4.2 - 使用 sencha cmd 的菜单渐变背景

Question

我想使用 sencha cmd 创建渐变背景色

这是我尝试过的：

.#{$prefix}-menu-body{
@include background-image(linear-gradient(#47607E, #35475B));
 }

我把它放在下面

sass\src\menu\Menu.scss

并运行包构建。

我没有看到菜单背景有任何变化。

我也想知道我是否可以使用 CSS 变量来做到这一点？

Answer 1

menu 是一个面板 ui 。Ext.panel.Panel 查看源码

extjs-panel-ui( $ui-label, [$ui-border-color], [$ui-border-radius], [$ui-border-width], [$ui-padding], [$ui-header-color], [$ui-header-font-family], [$ui-header-font-size], [$ui-header-font-weight], [$ui-header-line-height], [$ui-header-border-color], [$ui-header-border-width], [$ui-header-border-style], [$ui-header-background-color], [$ui-header-background-gradient], [$ui-header-inner-border-color], [$ui-header-inner-border-width], [$ui-header-text-padding], [$ui-header-text-transform], [$ui-header-padding], [$ui-header-icon-width], [$ui-header-icon-height], [$ui-header-icon-spacing], [$ui-header-icon-background-position], [$ui-header-glyph-color], [$ui-header-glyph-opacity], [$ui-tool-spacing], [$ui-tool-background-image], [$ui-body-color], [$ui-body-border-color], [$ui-body-border-width], [$ui-body-border-style], [$ui-body-background-color], [$ui-body-font-size], [$ui-body-font-weight], [$ui-background-stretch-top], [$ui-background-stretch-bottom], [$ui-background-stretch-right], [$ui-background-stretch-left], [$ui-include-border-management-rules], [$ui-wrap-border-color], [$ui-wrap-border-width] )

为面板创建一个视觉主题，将​​它们放在你的 menu.scss 中

@include extjs-panel-ui(
    $ui-label: 'your-ui-label-when-used-in 'ui' property',
    $ui-body-background-gradient: color-stops(#F950AD, #E4007f),
    $ui-border-color:#E4007f,
    $ui-body-background-color:#E4007f,
    $ui-body-border-width:0px,
    $ui-border-radius:5px,
    $ui-body-font-size:1.6em
);

在 ext-theme-neutral /sass/panel/panel.scss 添加

  $ui-body-background-gradient: $panel-body-background-gradient,

// $panel-body-background-gradient 在你的主题中，var/panel/panel.scss //$ui-body-background-gradient 是你要使用的 var。编辑面板主体 scss

  // body
    .#{$prefix}panel-body-#{$ui-label} {
        @if $ui-body-background-color != null { background: $ui-body-background-color; }
        @if $ui-body-border-color != null {     border-color: $ui-body-border-color; }
        @if $ui-body-color != null {            color: $ui-body-color; }
        @if $ui-body-font-size != null {        font-size: $ui-body-font-size; }
        @if $ui-body-font-weight != null {      font-size: $ui-body-font-weight; }
        @if $ui-body-border-width != null {
            border-width: $ui-body-border-width;
            @if $ui-body-border-style != null { border-style: $ui-body-border-style; }
        }
        //$ui-body-background-gradient: $panel-body-background-gradient,
        ////$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ add it !!!
        @if $ui-body-background-gradient !=null {
         @include background-gradient(
                     $ui-body-background-color,
                    $ui-body-background-gradient,
                    top
                );
        }
    }