IntelliJ IDEA：在Sass中提取變量重構(gòu)

在Sass中提取變量重構(gòu)

此功能僅在Ultimate版本中受支持。

IntelliJ IDEA允許您使用本地或全局變量替換Sass表達(dá)式。您可以在編輯器（在當(dāng)前位置重構(gòu)）或重構(gòu)對(duì)話框中正確執(zhí)行此操作。

$blue: #3bbfce
$margin: 16px

.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue

$blue: #3bbfce
$margin: 16px;
$var: $margin / 2

.border
padding: $var
margin: $var
border-color: $blue

在適當(dāng)?shù)奈恢锰崛ass變量

1. 在編輯器中，選擇要用變量替換的表達(dá)式。您可以自己動(dòng)手或使用“智能表達(dá)式選擇”功能讓IntelliJ IDEA為您提供幫助。因此，請(qǐng)執(zhí)行以下操作之一：
   • 突出顯示表達(dá)式。然后主菜單或上下文菜單上選擇：重構(gòu)|提取|變量。

     或者，按下Ctrl+Alt+V。

   • 將光標(biāo)放在表達(dá)式之前或之內(nèi)。在主菜單或上下文菜單中選擇：重構(gòu)|提取變量?；虬聪翪trl+Alt+V。在“表達(dá)式”彈出菜單中，選擇“表達(dá)式”。為此，請(qǐng)單擊所需的表達(dá)式?；蛘?，使用向上和向下箭頭鍵導(dǎo)航到感興趣的表達(dá)式，然后按Enter將其選中。

2. 如果找到多個(gè)選定表達(dá)式，或在“找到多個(gè)事件”彈出菜單中選擇“僅替換此事件”或“ 替換所有事件”。
   

   要選擇所需選項(xiàng)，只需單擊它即可?；蛘?，使用向上和向下箭頭鍵導(dǎo)航到感興趣的選項(xiàng)，然后按Enter將其選中。

3. 在源代碼中選擇將聲明新變量的位置。聲明可以是全局的（變量在整個(gè)文件中可用）或本地聲明（變量在使用前立即聲明，并且僅在當(dāng)前塊中可用）。

4. 指定變量的名稱。執(zhí)行以下操作之一：

   • 從彈出列表中選擇一個(gè)建議的名稱。為此，請(qǐng)雙擊合適的名稱?；蛘撸褂孟蛏虾拖蛳录^鍵導(dǎo)航到感興趣的名稱，然后按Enter鍵選擇它。完成后，按下Escape鍵。

   • 通過鍵入來編輯名稱。名稱顯示在帶紅色邊框的框中，并在您鍵入時(shí)更改。完成后，按下Escape鍵。

“ 表達(dá)式” 彈出菜單包含適用于編輯器中當(dāng)前光標(biāo)位置的所有表達(dá)式。
在彈出窗口中瀏覽建議的表達(dá)式時(shí)，編輯器中突出顯示的代碼會(huì)相應(yīng)更改。

使用對(duì)話框提取Sass變量

如果在“編輯器”設(shè)置中清除“在當(dāng)前位置啟用重構(gòu)”復(fù)選框，則“提取變量”重構(gòu)將通過“提取變量”對(duì)話框執(zhí)行。

1. 選擇所需的表達(dá)式，并如上所述調(diào)用“提取變量”重構(gòu)。

2. 如果為當(dāng)前光標(biāo)位置檢測(cè)到多個(gè)表達(dá)式，則會(huì)顯示“表達(dá)式”列表。如果是這種情況，請(qǐng)選擇所需的表達(dá)式。為此，請(qǐng)單擊表達(dá)式。或者，使用向上和向下箭頭鍵導(dǎo)航到感興趣的表達(dá)式，然后按Enter鍵將其選中。

3. 在Sass的“提取變量”對(duì)話框中：

   • 指定變量名稱。您可以從列表中選擇一個(gè)建議的名稱，或在“名稱”字段中鍵入名稱。

   • 指定聲明的地方。從下拉列表中選擇所需的位置（全局或本地）。

   • 如果找到多個(gè)選定表達(dá)式，則可以通過選中相應(yīng)的復(fù)選框來選擇替換所有找到的匹配項(xiàng)。如果要僅替換當(dāng)前事件，請(qǐng)清除“替換所有實(shí)例”復(fù)選框。

   • 單擊“確定”。