Question

我想使用sencha cmd

创建渐变背景色

这是我尝试过的：

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

我把它放在

之下

SASS \ SRC \菜单\ Menu.scss

并运行包构建。

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

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

Answer 1

菜单是一个面板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] )

为Panel创建视觉主题把它们放在你的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。编辑panel-body 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
                );
        }
    }

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

1 个答案: