以示例進行說明，使用變數進行樣式調整。

一、示例需求：

當選中一個表格時，會有額外的選擇框樣式，其實就是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);