風格應該只適用於一個類正在適用於所有內容

Question

我的視口中有一個邊框佈局。在邊界佈局中，我有一個「標題」部分和一個「導航」部分。

的文件夾結構如下所示：

我想添加樣式只有頭部分。

我在「上海社會科學院/ src目錄/查看/主/頭」文件夾中創建一個「Header.scss」文件：

據我瞭解the documentation on styling the view in the app，當你創建一個匹配的文件夾和文件結構在sass/var/view文件夾中，該scss文件中的樣式應僅應用於應用程序文件夾中的給定類。

添加以下規則到Header.scss文件：

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

主體背景色不更改標題，但它也改變了在視口中的所有面板。

我誤解了SASS VAR文件夾應該如何工作？我如何將樣式規則應用於頭類？

Answer 1

當您創建的 SASS的/ var /視圖文件夾中的匹配文件夾和文件結構，在SCSS文件的樣式應該只 適用於某一類的應用程序文件夾

不真正。

匹配文件夾和* .scss文件名將簡單地確保該文件包含在構建中的- 當且僅當相應的應用程序類已包含/正在使用中時。除此之外，Sencha CMD不介入如何處理SCSS和應用CSS樣式 - 這一切都由Compass和Web瀏覽器完成。

我誤解了sass var文件夾應該如何工作？

所以是的，你是。

僅僅通過在與其JS對象相對應的特定* .scss文件中爲先前定義的SCSS變量賦值一個新值，您並不是限制該變量對相關應用程序類的影響。您只需確保只有在構建中包含應用程序類時纔會進行分配。一旦它被包含，變量的影響將與SCSS的工作方式一致 - 就好像你在一個文件中有所有這些變量和規則（最終是的情況）。

如何將樣式規則應用於頭類？

使用cls使頭的面板不同（或bodyCls），並把相應的規則sass/src/view/..../Header.scss：

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

Answer 2

首先，我認爲德雷克企業制度的答案是偉大的。它涵蓋了作者99％的問題。我的答案並不意味着被認爲是更好的答案，它更多地補充了Drake Enterprise Systems提出的解決方案。

樣式化應用程序的最佳方式是使用自定義主題。這並不難，它可以重複使用，並符合Sencha如何讓你做到這一點。 Thereareseveraltutorialsoutthere當然Sencha自己也有great guide。

對於那些不想全力以赴的人，我認爲使用UI是最佳做法。這是設計你的組件的好方法。用戶界面就像一個混合，但有可選參數（過去你必須設置每個參數，這是一個痛苦的屁股）。大多數組件已經有一個名爲「默認」的用戶界面，並且可以將開箱即可更改爲「明亮」。您也可以像ExtJs一樣靈活地構建自己的UI。

如果我們查看ui of 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 
); 

關過程中，用戶界面可以設置聲明：

// 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的混入，在你可以設置和添加到默認的類名稱，所以對於一個容器，這將是x-container-mycustomui