Стиль, который должен применяться только к одному классу, применяется ко всему

когда вы создаете соответствующую структуру папки и файла в папке sass/var/view, стили в этом файле scss должны применяться ТОЛЬКО к данному классу в папке приложения.

Не правда.

Совпадение имен папок и файлов *.scss просто гарантирует, что файл включен в сборку — тогда и только тогда, когда соответствующий класс приложения включен/используется. Кроме того, Sencha CMD не вмешивается в то, как обрабатывается SCSS и применяются стили CSS — все это остается на усмотрение Compass и веб-браузеров.

Я неправильно понимаю, как должны работать папки sass var?

Так что да, вы.

Просто назначая новое значение ранее определенной переменной SCSS в определенном файле *.scss, соответствующем ее JS-сопряжению, вы не ограничиваете влияние переменной на соответствующий класс приложения. Вы просто убедитесь, что назначение будет иметь место только в том случае, если класс приложения включен в сборку. После включения влияние переменной будет соответствовать тому, как работает SCSS — как если бы у вас были все эти переменные и правила в одном файле (что в конечном итоге так и происходит).

Как мне применить правила стиля только к классу заголовка?

Используйте cls, чтобы сделать панель заголовка другой (или bodyCls) и поместите соответствующие правила в sass/src/view/..../Header.scss:

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

Во-первых, я думаю, что ответ Drake Enterprise Systems великолепен. Она охватывает 99% вопросов автора. Мой ответ не предназначен для того, чтобы считаться лучшим ответом, это скорее дополнение к решению, предложенному Drake Enterprise Systems.

Лучший способ стилизовать ваши приложения — использовать пользовательскую тему. Это не так сложно, это можно использовать повторно и в соответствии с тем, как Сенча хотел бы, чтобы вы это сделали. Там являются несколько руководства out здесь и, конечно же, у Sencha есть отличное руководство.

Для тех, кто не хочет идти ва-банк, я думаю, что лучше всего использовать пользовательский интерфейс. Это отличный способ стилизовать компоненты. Пользовательский интерфейс похож на миксин, но с необязательными параметрами (раньше вам приходилось устанавливать каждый параметр, что было головной болью). У большинства компонентов уже есть пользовательский интерфейс с именем «по умолчанию», и «из коробки» его можно изменить на «светлый». Вы также можете создавать свои собственные пользовательские интерфейсы, как и следовало ожидать от такой гибкой среды, как ExtJs.

Если мы посмотрим на ссылку пользовательский интерфейс панели, вы можете видеть, что многие стили могут быть выполнены с помощью параметров. Вот пример пользовательского пользовательского интерфейса для панели:

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

Конечно, пользовательский интерфейс можно установить декларативно:

// 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 по умолчанию, пользовательский интерфейс может быть установлен и добавлен к имени класса по умолчанию, поэтому для контейнера это будет x-container-mycustomui