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?

Greendrake · Accepted Answer · 2015-08-29T02:28:56.790

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
    }
}

Great answer, and for 99% true. I don't have time now, but the solution of setting classes is not that great. I will come back on this later :) — Tarabass, Aug 29 '15 at 07:32
Ah, thank you. That cleared up a lot of misunderstandings for me. — Chris Schmitz, Aug 29 '15 at 11:38

score 3 · Answer 2 · answered Aug 29 '15 at 20:46

First, I think the answer of Drake enterprise Systems is great. It covers 99% of the questions of the author. My answer is not meant to be considered as a better answer, it's more a complement for the solution Drake Enterprise Systems came up with.

The best way to style your apps is using a custom theme. It's not that hard, it's reusable and in line with how Sencha would like you to do it. There are several tutorials out there and of course Sencha has a great guide themselves.

For those who don't want to go all in I think using UI's is best practice. It's a great way to style your components. A UI is like a mixin, but with optional parameters (in the past you had to set every parameter, which was a pain in the ass). Most components already have a ui named 'default' and out-of-the-box can be changed to 'light'. You can also create your own ui's as we may expect from a flexible framework as ExtJs is.

If we look at the ui of a panel you can see that a lot of styling can be done through parameters. Here's an example of a custom ui for a panel:

@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
);

Off course the ui can be set declarative:

// 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'
}]

Even if a xtype doesn't have an UI-mixin from default, the ui can be set and is added to the default class name, so for a container this would be x-container-mycustomui

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

2 Answers2