Ext JS中使用SCSS變數調整樣式
阿新 • • 發佈:2018-11-30
以示例進行說明,使用變數進行樣式調整。
一、示例需求:
當選中一個表格時,會有額外的選擇框樣式,其實就是border。如下圖,在“微紅包”周圍,有dotted的border-style邊框。
二、尋找對應的主題scss檔案
1、開啟瀏覽器的,使用瀏覽器的開發者工具,使用選擇工具,選中該元素。
2、通過點選,發現選中後會新增一個類(x-grid-item-focused),並且多出了一個偽元素(::before):
3、因為是選中後才會有的,所以如果在偵錯程式定位到對應的元素,新增類跟偽元素都會消失。
4、點選開發者工具窗體右上角的...,選擇“Search all files”。
5、在查詢文字框中輸入x-grid-item-focus
6、單擊查詢到的檔案,定位到scss(此處為含有偽類的)檔案:
三、修改scss變數
1、定位到相應的scss檔案:
在專案的ext/classic目錄下,包含classic型別的主題。
2、找到變數定義:
在上面的檔案中,發現border的定義中的變數
$grid-row-cell-focus-border-style
即是我們需要修改的變數。
3、定位變數所在的檔案位置:
4、在所使用的主題中改變變數值:
因為我自定義了一個主題,並繼承自系統主題theme-classic。
所以在自定義的主題內對應位置新建對應的檔案,在這裡是Table.scss,並將動態變數賦值即可:
$grid-row-cell-focus-border-style: dynamic(none);