Extract Variable for Sass
On this page:
You can replace a Sass expression with a local or global variable.
To perform this refactoring, you can use:
- In-place refactoring. In this case you specify the new name right in the editor.
- Refactoring dialog, where you specify all the required information. To make such a dialog accessible, you have to clear the check box Enable in-place mode in the editor settings.
Extracting a variable in-place
To extract a variable using in-place refactoring
In the editor, select the expression to be replaced with a variable. You can do that yourself or
smart expression selection
feature to let AppCode help you. So, do one of the following:
Highlight the expression. Then choose
on the main menu or on the context menu.
- Place the cursor before or within the expression. Choose on the main menu or on the context menu. or press⌃⌥V. In the Expressions pop-up menu, select the expression. To do that, click the required expression. Alternatively, use the Up and Down arrow keys to navigate to the expression of interest, and then press ⏎ to select it.
- Highlight the expression. Then choose on the main menu or on the context menu.
- If more than one occurrence of the selected expression is found, select
Replace this occurrence only or Replace all occurrences in the
Multiple occurrences found pop-up menu.
To select the required option, just click it. Alternatively, use the ↑ and ↓ arrow keys to navigate to the option of interest, and press ⏎ to select it.
- Select the place in the source code, where the new variable will be declared. The declaration can be global (a variable is available throughout the whole file), or local (a variable is declared immediately before use, and is available in the current block only).
- Specify the name of the variable. Do one of the following:
- Select one of the suggested names from the pop-up list. To do that, double-click the suitable name. Alternatively, use the ↑ and ↓ arrow keys to navigate to the name of interest, and ⏎ to select it. When finished, press ⎋.
- Edit the name by typing. The name is shown in the box with red borders and changes as you type. When finished, press ⎋.
Extracting a variable using the dialog box
To extract a variable using the dialog box
- Select the desired expression, and invoke Extract Variable refactoring as described above.
- If more than one expression is detected for the current cursor position, the Expressions list appears. If this is the case, select the required expression. To do that, click the expression. Alternatively, use the Up and Down arrow keys to navigate to the expression of interest, and then press ⏎ to select it.
- In the Extract Variable dialog for Sass:
- Specify the variable name. You can select one of the suggested names from the list or type the name in the Name field.
- Specify the place for declaration. Select the desired place (global or local) from the drop-down list.
- If more than one occurrence of the selected expression is found, you can select to replace all the found occurrences by selecting the corresponding check box. If you want to replace only the current occurrence, clear the Replace all occurrences check box.
- Click OK.