GoLand
 
2023.2
Shortcuts: Windows
Get GoLand
You are viewing the documentation for an earlier version of GoLand.
  1. Supported languages
  2. Style sheets

Style Sheets

Last modified: 09 August 2023

Required plugin:

CSS The plugin is bundled with GoLand and enabled by default.

With GoLand, 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, introduce variables, and more.

Before you start

Make sure the CSS plugin is enabled in the settings. Press CtrlAlt0S to open the IDE settings and then select Plugins. Click the Installed tab. In the search field, type CSS. For more details about plugins, see Managing plugins.

Code completion

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

https://resources.jetbrains.com/help/img/idea/2023.2/css_intro_completion.png
Gif

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, GoLand first suggests classes and ids from the style tag and files linked with link tags. If no matching results are found, GoLand 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 CtrlSpace twice.

Project-wide completion for Style Sheet symbols in HTML

Complete Style Sheet classes from external libraries

With GoLand, you can also get completion for class names from Twitter Bootstrap or other CSS libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.

https://resources.jetbrains.com/help/img/idea/2023.2/ws_css_enable_completion_for_external_libs.png
Gif

Complete Sass and SCSS selectors

GoLand 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

https://resources.jetbrains.com/help/img/idea/2023.2/style_sheets_go_to_definition.png
Gif

Documentation look-up

For properties and pseudo-elements, GoLand 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.

Style sheets quick documentation: compatible browsers are listed

If the property is available in all versions of browsers, GoLand does not show any information about its compatibility.

Otherwise, the Documentation popup also lists the browsers and their versions that support the property.

tip

Note that compatibility is checked only for Chrome, Chrome Android, Safari, Safari iOS, Firefox, Internet Explorer, and Edge.

For selectors, GoLand also shows their specificity.

Documentation look-up: specificity fpr selectors

View documentation for a property

  • Position the caret at the property and press Ctrl0Q or select View | Quick Documentation Lookup from the main menu.

  • When you hover the mouse pointer over a property, GoLand immediately displays the reference for it in the Documentation popup.

    You can turn off this behavior or configure the popup to appear faster or slower, see Configuring the behavior of Documentation popup below.

Configure the behavior of Documentation popup

  • To turn off showing documentation automatically when you hover the mouse over code symbols, Click the Show Options Menu icon in the popup and disable the Show on Mouse Move option.

  • To have the Documentation popup shown faster or slower, open the Settings dialog (CtrlAlt0S), go to Editor | General | Code Completion, then select the Show the documentation popup checkbox and specify the delay time.

Open the MDN documentation in the browser

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

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

Refactoring

With GoLand, 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.

https://resources.jetbrains.com/help/img/idea/2023.2/ws_css_extract_variable.png
Gif

Introduce variables

  1. In the editor, position the caret at the expression to convert into a variable and press CtrlAlt0V or select Refactor | Introduce | Introduce 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 Enter when ready.

With GoLand, 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.

Introduce rulesets

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

  2. Press AltEnter and select Introduce ruleset from the list.

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

Move rulesets to other files

  1. Position the caret anywhere in the ruleset to move and press F6.

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

  3. By default, GoLand 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.

https://resources.jetbrains.com/help/img/idea/2023.2/ws_sass_rename.png
Gif

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

Turn on compatibility check

  1. In the Settings dialog (CtrlAlt0S), 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 GoLand, you can easily change color values in Style Sheets without typing hexadecimal codes.

https://resources.jetbrains.com/help/img/idea/2023.2/css_color.png
Gif

Choose colors

  1. Open the desired Style Sheet for editing.

  2. Type color:, and then press CtrlSpace.

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

Change colors

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

Preview the code of colors

  • GoLand marks each color property with a gutter icon of the corresponding color. When you hover over a color icon, GoLand displays a popup that shows the color preview and its hexadecimal code.

    To use a code instead of a human-readable color name, press AltEnter and select Convert color to <color code system> from the list, where <color code system> is HEX, HSL, HWB, or RGB

Show color icons in the gutter

By default, GoLand displays color icons in the gutter. If they are hidden, you can return them at any time.

  1. In the Settings dialog (CtrlAlt0S), 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, GoLand can show you all the styles applied to an arbitrary tag.

Viewing the styles applied to the tag <body>

Configuring syntax highlighting

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