AppCode 2019.2 Help

Style Sheets

With AppCode, you can write style definitions in CSS as well as in various languages that compile into it, such as Sass, Less, SCSS, or Stylus.

You can also look up documentation for Style Sheets, create and move rulesets, extract variables, and more.

Code completion

AppCode provides code completion for properties, their values, selectors, variables, and mixins.

Complete Style Sheet classes

Completion for CSS, SCSS, Less, and Sass classes and ids is available in HTML files, in various types of templates (for example, in Angular or Vue.js), as well as in JSX code.

In HTML 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.

Project-wide completion for Style Sheet symbols in HTML

Complete Sass and SCSS selectors

AppCode also provides completion for Sass and SCSS selectors - including nested selectors and selectors created with an ampersand (&).

Completion for Sass and SCSS selectors

Search and navigation

  • To find usages of a Style Sheet symbol, place the caret at it and press ⌥F7. Learn more from Search for usages in a project.

  • To jump from a usage of a Style Sheet symbol to its definition, press ⌘B. Navigation to definition is available for classes, ids, selectors - including nested selectors and selectors with an ampersand & - as well as for variables and mixins.

    Learn more from Go to declaration.

Documentation look-up

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 View | Quick Documentation Lookup from the main menu. AppCode opens a Documentation popup with a brief description of the property.

  • 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.

    Style sheets quick documentation: compatible browsers are listed

To open the MDN documentation in the browser

  • In the Documentation popup F1, click the link at the bottom.

  • Press ⇧F1 or select View | External Documentation from the main menu.

Formatting

With AppCode built-in formatter, you can reformat fragments of Style Sheet code as well as entire files and folders to meet the language-specific code style requirements. The formatter also wakes up automatically when you generate or refactor your code.

  • To configure formatting for a Style Sheet language, in the Preferences dialog (⌘,), go to Editor | Code Style | Style Sheets | <your Style Sheet language> and configure the language-specific settings for tabs and indents, spaces, wrapping and braces, hard and soft margins, and so on.

  • To reformat a code fragment, select it in the editor and press⌥⌘L.

  • To reformat a file or a folder, select it in the Project tool window and press ⌥⌘L.

See Reformat and rearrange code for more details.

Alternatively, you can use the Prettier formatter (N/A), see Prettier for details.

Refactoring

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

  1. In the editor, position the caret at the expression to convert into a variable and press ⌥⌘V or select Refactor | Extract | Variable from the context menu or from the main menu.

  2. 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.

  3. For .scss, and .sass, select the global or local scope for the variable.

  4. In the field with red borders, accept the suggested variable name or specify a custom name. Press when ready.

With AppCode, you can create new rulesets from existing declarations in CSS, SCSS, Sass, or Less files and even move entire rulesets between files using refactoring and intention actions.

To extract a ruleset

  1. Select the declarations to extract. If you need only one declaration, just position the caret inside it.

  2. Press ⌥⏎ and select Extract ruleset from the list.

AppCode creates a new ruleset 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 ruleset.

To move a ruleset to another file

  1. Position the caret anywhere in the ruleset and pressF6.

  2. In the dialog that opens, specify the file to move the ruleset to. If the specified file does not exist, AppCode will suggest creating it.

  3. By default, AppCode automatically opens the file where the ruleset is moved. To change this behavior, clear the Open in editor checkbox.

Common refactorings, such as Copy, Move, or Rename, are also available.

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.

Style sheet compatibility inspection popup
  1. In the Preferences dialog (⌘,), go to Editor | Inspections.

  2. 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.

    CSS compatibility inspection settings

Changing color values

With AppCode, you can easily change color values in Style Sheets without typing hexadecimal codes.

To choose a color

  1. Open the desired Style Sheet for editing.

  2. Type color:, and then press ⌃Space.

  3. Select the desired color value from the suggestion list or choose color... to pick a custom one.

To change a color

  1. Open the desired Style Sheet for editing, and locate the color property that you want to change.

  2. Click the color icon in the gutter.

    Alternatively, if the icons are not shown, press ⌥⏎ and select Change color from the list. See To show color icons in the gutter below.

  3. 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 color property 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 use a code instead of a human-readable color name, press ⌥⏎ and select Convert color to <color code system> from the list, where <color code system> is HEX, HSL, HWB, or RGB

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.

  1. In the Preferences dialog (⌘,), go to Editor | General | Gutter Icons. The Gutter Icons page opens.

  2. 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 Show Applied Styles for Tag.

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.

Viewing the styles applied to the tag <body>

From the tool window, you can navigate to tags and definitions of properties in your source code.

  • To jump to the tag, click the Navigate to Tag toolbar button 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 the Navigate to Style Sources button on the toolbar of the right-hand pane.

Configuring syntax highlighting

You can configure CSS-aware syntax highlighting according to your preferences and habits.

  1. In the Preferences dialog (⌘,), go to Editor | Color Scheme | CSS.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.

Last modified: 29 August 2019