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

Question

I have a border layout in my viewport. Within the border layout, I have a "header" section and a "navigation" section.

The folder structure looks like this:

I'm trying to add style to the header portion only.

I created a "Header.scss" file in my "sass/src/view/main/header" folder:

As I understand the documentation on styling the view in the app, 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.

I added the following rule to the Header.scss file:

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

The body background color does change for the header, but it also changes for all panels in the viewport.

Am I misunderstanding how the sass var folders are supposed to work? How would I apply the style rules to only the 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

Not true.

Matching folder and *.scss file names will simply make sure that the file is included in the build — if and only if the corresponding app class is included / in use. Beyond that, Sencha CMD does not intervene in how SCSS is processed and CSS styles are applied — it is all left up to Compass and web browsers.

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

So yes, you are.

Merely by assigning a new value to a previously defined SCSS variable in a certain *.scss file corresponding to its JS mate, you are not limiting the variable's impact to the relevant app class. You are simply making sure that the assignment will only take place if the app class is included in the build. Once it is included, the variable's impact will be in accordance with how SCSS works — as if you had all those variables and rules in one file (which eventually is the case).

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

Use cls to make the header's panel different (or bodyCls), and put corresponding rules in sass/src/view/..../Header.scss:

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