javascript - 应仅适用于一个类的样式正在应用于所有内容

Question

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

文件夹结构如下所示:

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

我在“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;

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

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

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 文件名将简单地确保该文件包含在构建中——当且仅当包含/正在使用相应的应用程序类时。除此之外，Sencha CMD 不干预 SCSS 的处理方式和 CSS 样式的应用——这一切都留给了 Compass 和网络浏览器。

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

是的，你是。

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

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

使用cls使标题面板不同(或 bodyCls )，并将相应的规则放入 sass/src/view/..../Header.scss:

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