Question

我的视口中有边框布局。在边框布局中，我有一个“标题”部分和一个“导航”部分。

文件夹结构如下所示：

我正在尝试仅为标题部分添加样式。

我在“sass / src / view / main / header”文件夹中创建了一个“Header.scss”文件：

据我了解the documentation on styling the view in the app，当您在sass/var/view文件夹中创建匹配的文件夹和文件结构时，该scss文件中的样式应仅适用于app文件夹中的给定类。

我将以下规则添加到Header.scss文件中：

//in Header.scss
$panel-body-background-color: red;

标题中的正文背景颜色会发生变化，但视口中的所有面板也会发生变化。

我是否误解了sass var文件夹应该如何工作？我如何将样式规则仅应用于标题类？

Answer 1

在中创建匹配的文件夹和文件结构时 sass / var / view文件夹，该scss文件中的样式应仅适用到app文件夹中的给定类

不正确。

匹配文件夹和* .scss文件名只会确保文件包含在构建中 - 当且仅当包含/使用相应的应用程序类时。除此之外，Sencha CMD不会干预如何处理SCSS并应用CSS样式 - 这完全取决于Compass和Web浏览器。

我是否误解了sass var文件夹应该如何工作？

是的，你是。

仅仅通过为与其JS配对相对应的某个* .scss文件中的先前定义的SCSS变量分配新值，您不会将变量的影响限制为相关的app类。您只是确保只有在构建中包含应用程序类时才会进行分配。一旦包含它，变量的影响将与SCSS的工作方式一致 - 就好像你在一个文件中拥有所有这些变量和规则（最终）。

如何将样式规则仅应用于标题类？

使用cls使标题的面板不同（或bodyCls），并在sass/src/view/..../Header.scss中添加相应的规则：

.<my header panel css class> {
    <panel body selector> {
        // custom styling
    }
}

Answer 2

首先，我认为Drake企业系统的答案很棒。它涵盖了作者99％的问题。我的答案并不是一个更好的答案，它更像是Drake Enterprise Systems提出的解决方案的补充。

设置应用样式的最佳方式是使用自定义主题。它不是那么难，它可以重复使用，并且符合Sencha希望你这样做的方式。 There are several tutorials out there当然Sencha本身有great guide。

对于那些不想全力以赴的人，我认为使用UI是最佳实践。这是设计组件样式的好方法。 UI就像一个混合，但有可选参数（过去你必须设置每个参数，这是一个痛苦的屁股）。大多数组件已经有一个名为'default'的ui，并且开箱即用可以更改为'light'。您也可以像ExtJs那样，通过灵活的框架创建自己的ui。

如果我们查看ui of a panel，您可以看到可以通过参数完成很多样式。以下是面板自定义ui的示例：

@include extjs-panel-ui(
    $ui: 'highlight',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

当然，ui可以设置声明：

// custom "highlight" UI        
xtype: 'panel',
ui: 'highlight',

bind: {
    title: '{name}'
},

region: 'west',
html: '<ul><li>This area is...</li></ul>',
width: 250,
split: true,

tbar: [{
    text: 'Button',
    handler: 'onClickButton'
}]

即使xtype没有默认的UI-mixin，也可以设置ui并将其添加到默认的类名中，因此对于容器，这将是x-container-mycustomui

应该只适用于所有类的样式

2 个答案: