应仅应用于一个 class 的样式正在应用于所有内容

Question

我的视口中有边框布局。在边框布局中，我有一个 "header" 部分和一个 "navigation" 部分。

文件夹结构如下所示：

我正在尝试仅向 header 部分添加样式。

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

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

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

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

body 背景颜色确实会因 header 而改变，但它也会因视口中的所有面板而改变。

我是不是误解了 sass var 文件夹的工作原理？我如何将样式规则仅应用于 header class?

Answer 1

when you create a matching folder and file structure in the sass/var/view folder, the styles in that scss file should apply ONLY to the given class in the app folder

不正确。

匹配的文件夹和 *.scss 文件名将简单地确保文件 包含在构建 中——当且仅当包含相应的应用程序 class / 正在使用。除此之外，Sencha CMD 不干预 SCSS 的处理方式和 CSS 样式的应用——这一切都留给了 Compass 和网络浏览器。

Am I misunderstanding how the sass var folders are supposed to work?

所以是的，你是。

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

How would I apply the style rules to only the header class?

使用cls to make the header's panel different (or bodyCls)，并在sass/src/view/..../Header.scss中放入相应的规则：

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

Answer 2

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

设置应用样式的最佳方式是使用自定义主题。这并不难，它是可重用的，并且符合 Sencha 希望您使用它的方式。 There are several tutorials out there and of course Sencha has a great guide 他们自己。

对于那些不想全力以赴的人，我认为使用 UI 是最佳做法。这是设置组件样式的好方法。 UI 就像一个 mixin，但带有可选参数（过去你必须设置每个参数，这是一件很痛苦的事）。大多数组件已经有一个名为 'default' 的 ui，开箱即用的可以更改为 'light'。您还可以创建自己的 ui，正如我们对 ExtJs 之类的灵活框架所期望的那样。

如果我们查看 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 并将其添加到默认的 class 名称中，所以对于一个容器来说，这将是 x-container-mycustomui

应仅应用于一个 class 的样式正在应用于所有内容

Style that should apply to only one class is being applied to everything

javascript

extjs

sass

extjs6