ExtJS4 SASS自定義主題

2021-06-28 04:25:43 字數 1392 閱讀 1128

參見《ext js 權威指南》

extjs4可以結合sass和compass來建立自己的主題,再次簡單介紹其使用方法。關於sass和compass參見其相關官網:和 」。

compass

由sass

的核心團隊成員

chris eppstein

建立,是乙個非常豐富的樣式框架,包括大量定義好的

mixin

,函式,以及對

sass

的擴充套件。在「開始」選單下單擊「

start command prompt with ruby

」,安裝「

0.11.5

」版本,命令列輸入「

安裝以後可以用命令「compass -v」檢視版本

在命令列輸入「geminstall sass –v3.1.7」,安裝成功後可以使用命令「sass -v」檢視版本。

extjs文件下放置的是相關的js,resources以及下面的主題樣式。extjs\resources\themes下的compass_init.rb必須存在,extjs\resources\themes\stylesheets\ext4\defaul下面都是.scss檔案存放extjs元件相關的樣式變數。和extjs文件同級的的resources文件下面有三個文件。nicole\webroot\resources\images是由nicole\webroot\extjs\resources\themes\images複製得來。

(2)修改配置檔案

修改nicole\webroot\resources\sass\config.rb檔案,配置 ext jssdk對應專案的路徑

修改nicole\webroot\resources\sass\my-ext-theme.scss檔案,該檔案是主題的模本檔案,通過修改可以對主題進行配置。

開啟ruby的命令提示視窗,將目錄切換到專案的目錄下,如本例「e:\testwork\nicole\webroot\resources\sass」在視窗輸入「compass compile」,可以看到nicole\webroot\resources\css\下生成乙個my-ext-theme.css檔案。在專案中引用這個檔案就可以了。

自定義ExtJS主題

extjs提供的可以使用的主題包對於建立乙個乾淨專業的程式來說已經很有創意了,然而,你可能還是會希望提供自己的一種設計方式或現在存在的企業設計方式。從歷史上來說,給程式美化就是指的給html標籤提供渲染元件的規則,但是這樣做也會有一些弊端出現。首先,你需要負擔的是各種支援的瀏覽器。其次,隨著框架的成...

ExtJS4 2 自定義主題 入門

用過 extjs 的朋友都有一種趨勢 審美疲勞,好在 ext4.1 之後的版本提供了快速自定義主題的功能,本文的內容主要來自 我記錄下來是為了強化一下。命令列內容 1 cd d e extcoding 2 sencha sdk ext 4.2 generate workspace themingst...

自定義主題

element 預設提供一套主題,css 命名採用 bem 的風格,方便使用者覆蓋樣式。我們提供了三種方法,可以進行不同程度的樣式自定義。element 的 theme chalk 使用 scss 編寫,如果你的專案也使用了 scss,那麼可以直接在專案中改變 element 的樣式變數。新建乙個樣...