Languages and frameworks: style sheets

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

• To jump from a usage of a Style Sheet symbol to its definition, press F12. 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.

View documentation for a property

• Position the caret at the property and press Ctrl+K, I or select View | Quick Documentation Lookup from the main menu.

• When you hover the mouse pointer over a property, JetBrains Rider 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 in the popup and disable the Show on Mouse Move option.

• To have the Documentation popup shown faster or slower, open the Settings/Preferences dialog (Ctrl+Alt+S), 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 Ctrl+K, I, click the link at the bottom.

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

Introduce variables

1. In the editor, position the caret at the expression to convert into a variable and press N/A 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.

Introduce rulesets

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

2. Press Alt+Enter and select Introduce ruleset from the list.

JetBrains Rider 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 N/A.

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

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

Turn on compatibility check

1. In the Settings/Preferences dialog (Ctrl+Alt+S), 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.

Choose colors

1. Open the desired Style Sheet for editing.

2. Type color:, and then press Ctrl+Space.

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 Alt+Enter 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

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

  To use a code instead of a human-readable color name, press Alt+Enter 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, JetBrains Rider displays color icons in the gutter. If they are hidden, you can return them at any time.

1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Gutter Icons. The Gutter Icons page opens.

2. In the Common area, select the Color preview checkbox.

• From the context menu of a tag, select Show Applied Styles for Tag.

  JetBrains Rider 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, JetBrains Rider 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.

1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Color Scheme | CSS.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors schemes: fonts and colors of IDE text.