Code Style. CSS
Use this page to configure formatting options for CSS files. View the result in the Preview pane on the right.
Tabs and Indents
Use tab character |
|
Smart tabs | An indentation consists of two parts. One part results from nesting code blocks and the other part is determined by alignment.
|
Tab size | In this text box, specify the number of spaces that fits in a tab. |
Indent | In this text box, specify the number of spaces (or tabs if the Use Tab Character checkbox is selected) to be inserted for each indent level. |
Continuation indent | In this text box, specify the number of spaces (or tabs if the Use Tab Character checkbox is selected) to be inserted between the values of properties. |
Keep indents on empty lines | If this checkbox is selected, AppCode retains indents on empty lines as if they contained some code. If the checkbox is cleared, AppCode deletes the tab characters and spaces on empty lines. |
Blank Lines
Use this tab to define where and how many blank lines you want AppCode to retain and insert in your code after reformatting. The results are displayed in the Preview pane.
Keep Maximum Blank Lines | In this area, specify the number of extra blank lines to be kept after reformatting. |
Minimum Blank Lines | In this area, configure whether to have or not to have extra empty lines around top-level blocks and nested selectors. In the text box next to each option, specify the minimum number of extra blank lines to be left. |
Other
In this tab, specify the alignment, braces, and spaces options to be applied on reformatting.
Braces placement | Use this drop-down list to specify where AppCode should place the opening braces of selectors. The available options are:
|
Align values | Use this drop-down list to specify how AppCode should align attributes and values. The available options are:
|
Align closing brace with properties | If this checkbox is selected, the closing brace of the selector will be placed under the list of properties. |
Keep single-line blocks | If this checkbox is selected, the blocks with a single property will be confined to one line. |
Spaces | Select the checkboxes in this area to add a space after the colon delimiting key and value, and before the opening brace of the selector. |
HEX Colors | Use this area to configure the hex color syntax. You can select from the following check options:
View changes in the Preview pane. |
Arrangement
In this tab, enable sorting of CSS properties, which is by default turned off, and select the sorting order.
To enable sorting, select the Sort CSS properties checkbox.
-
Select By name to have all CSS properties within each block reordered alphabetically. AppCode ignores vendor-specific prefixes but keeps multiple vendor-specific prefixes for a certain CSS property alpha-sorted.
border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black;
-
To define your own sorting strategy, select the Custom order option and specify the desired sorting order in the textbox next to it.
Use commas and spaces as delimiters and skip vendor-specific properties because AppCode always groups them with the corresponding one without a prefix. Within such group, properties are sorted by vendor prefix and the prefix-free one comes last.
AppCode remembers the modified Custom Order list and restores it if you turn custom sorting off and then turn it on again.
To sort all CSS properties in a file
From the main menu, select
.Alternatively, select Whole file and Rearrange code in the dialog that opens.
from the main menu, and then select
To sort CSS properties within a block
Select the block to sort and then select
from the main menu.Alternatively, select Rearrange code in the dialog that opens.
on the main menu, and then select
Set from
Click this link and choose the language to be used as the base for the current language code style.
To return to the initial set of code style settings and discard the changes, click Reset.