AppCode recognizes and processes most common style selectors: the universal selector
*, type selectors
.a, descendant selectors
.a.b, child selectors
.a .b, ID selectors
#b, pseudo-classes and class selectors
You can also look up documentation for style sheets, create and move rule-sets, extract variables, and more.
For properties and pseudo-elements, AppCode can show you a summary from the corresponding MDN article. This summary is displayed in the Documentation popup which shows a brief description of the property and its values, as well as information about its compatibility with various browsers.
To view documentation for a property at caret
Press F1 or select Documentation popup with a brief description of the property.from the main menu. AppCode opens a
If the property is available in all versions of browsers, AppCode does not show any information about its compatibility.
Otherwise, the Documentation popup also lists the browsers and their versions that support the property.
To open the MDN documentation in the browser
In the Documentation popup (F1), click the link at the bottom.
Press ⇧F1 or selectfrom the main menu.
Checking compatibility with browsers
Besides looking up in the documentation popup, you can check style sheet properties for compatibility with specific browsers on the fly. This inspection is based on the MDN Browser Compatibility Data and shows you a warning every time a property is not supported in one of the targeted browsers.
In the Preferences dialog (⌘,), go to .
Expand the CSS node and select the Browser compatibility for properties. In the Options area, select the browsers you want to target and the minimum versions for them.
Formatting Style Sheets
Every time AppCode generates, refactors, or reformats your style sheet code, it automatically applies the language-specific code style settings.
Alternatively, you can use the Prettier formatter.
To format a Style Sheet with Prettier
Select the code fragment to reformat in the editor or select a file or a folder in the Project tool window and press N/A.
Working with rule-sets
AppCode lets you create new rule-sets from existing declarations in CSS, SCSS, Sass, or Less files and even move entire rule-sets between files using intention actions and refactoring.
To extract a rule-set
Select the declarations to extract. If you need only one declaration, just place the cursor inside it.
Press ⌥⏎ and select Extract rule-set from the list.
AppCode creates a new rule-set with the same selector and moves the selected declarations to it. If the selection contains comments, nested selectors, and so on, they are also moved to the new rule-set.
To move a rule-set to another file
Place the cursor anywhere in the rule-set and press F6.
In the dialog that opens, specify the file to move the rule-set to. If the specified file does not exist, AppCode will suggest creating it.
By default, AppCode automatically opens the file where the rule-set is moved. To change this behavior, clear the Open in editor checkbox.
Completing style sheet classes
body tags in HTML files, AppCode provides completion for CSS, SCSS, Less, and Sass symbols. Completion is suggested for classes and ids defined inside
style tags in the current HTML file as well as for symbols from other style sheet files.
AppCode first suggests classes and ids from the
style tag and files linked with
link tags. If no matching results are found, AppCode also suggests symbols defined in all stylesheet files in the project. To see all classes and ids defined in the project straight away, before you start typing, press ⌃Space twice.
Refactoring in style sheets
With AppCode, you can convert expressions in style sheets into variables and introduce these variables using the
var(--var-name) syntax in .css files or the
$ syntax in .scss and .sass files.
To extract a variable
In the editor, place the cursor at the expression to convert into a variable and press ⌥⌘V or selectfrom the context menu or from the main menu.
If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences from the Multiple occurrences found list.
For .scss, and .sass, select the global or local scope for the variable.
In the field with red borders, accept the suggested variable name or specify a custom name. Press ⏎ when ready.
Common refactorings, such as Copy, Move, or Rename, are also available.
Changing Color Values in Style Sheets
With AppCode, you can easily change color values in Style Sheets without typing hexadecimal codes.
To choose a color
Open the desired Style Sheet for editing.
color:, and then press ⌃Space.
Select the desired color value from the suggestion list or choose color... to pick a custom one.
To change a color
Open the desired Style Sheet for editing, and locate the color property that you want to change.
Click the color icon in the gutter.
Alternatively, if the icons are not shown, press ⌥⏎ and select Change color from the list.
In the Choose color dialog that opens, pick the desired new color and click Choose.
To preview the code of a color
AppCode marks each
colorproperty with a gutter icon of the corresponding color. When you hover over a color icon, AppCode displays a popup that shows the color preview and its hexadecimal code.
To show color icons in the gutter
By default, AppCode displays color icons in the gutter. If they are for some reason hidden, you can return them at any time.
In the Preferences dialog (⌘,), go to . The Gutter Icons page opens.
In the Common area, select the Color preview checkbox.
Viewing the Styles Applied to a Tag
In HTML and XHTML files, AppCode can show you all the styles applied to an arbitrary tag.
From the context menu of a tag, select.
AppCode opens the CSS Styles tool window with two panes, the left-hand pane shows the styles for the tag and the right-hand pane shows their definitions. For each tag, AppCode opens a separate tab.
From the tool window, you can navigate to tags and definitions of properties in your source code.
To jump to the tag, click on the toolbar of the left-hand pane.
To jump to the definition of a property, select it in the left-hand pane and click on the toolbar of the right-hand pane.
Configuring syntax highlighting
You can configure CSS-aware syntax highlighting according to your preferences and habits.
In the Preferences dialog (⌘,), go to .
Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.