3

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

文件夹结构如下所示：

文件夹结构

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

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

头文件的scss文件

据我了解有关在应用程序中设置视图样式的文档，当您在文件夹中创建匹配的文件夹和文件结构时sass/var/view，该 scss 文件中的样式应仅适用于应用程序文件夹中的给定类。

我在 Header.scss 文件中添加了以下规则：

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

标题的主体背景颜色确实发生了变化，但视口中的所有面板也会发生变化。

风格规则适用于任何地方

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

4

2 回答 2

4

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

不对。

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

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

所以，是的，你是。

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

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

用于cls使表头的面板不同（或bodyCls），并将相应的规则放入sass/src/view/..../Header.scss：

.<my header panel css class> {
    <panel body selector> {
        // custom styling
    }
}
于 2015-08-29T02:15:08.080 回答
3

首先，我认为 Drake Enterprise Systems 的答案很棒。它涵盖了作者 99% 的问题。我的回答并不意味着被视为更好的答案，它更多的是对 Drake Enterprise Systems 提出的解决方案的补充。

为您的应用设置样式的最佳方式是使用自定义主题。这并不难，它是可重复使用的，并且符合 Sencha 希望您这样做的方式。那里 有 几个 教程 ， 当然 Sencha 自己也有很好的指南。

对于那些不想全力以赴的人，我认为使用 UI 是最佳实践。这是设置组件样式的好方法。UI 就像一个 mixin，但带有可选参数（过去您必须设置每个参数，这很麻烦）。大多数组件已经有一个名为“默认”的用户界面，并且开箱即用可以更改为“轻”。您还可以创建自己的用户界面，正如我们对 ExtJs 那样灵活的框架所期望的那样。

如果我们查看面板的 ui，您会发现很多样式都可以通过参数完成。以下是面板的自定义 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'
}]

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

于 2015-08-29T20:46:11.817 回答