# Sass, SCSS, Less, and PostCSS

> **TL;DR**
> Available only in IntelliJ IDEA with the Ultimate subscription: [download](https://www.jetbrains.com/idea/download/) to try or [explore the features](https://www.jetbrains.com/products/compare/?product=idea&product=idea-ult).
>
>
>
>
>
> Required plugins:
>
>
>
> `CSS` -    the plugin is bundled with IntelliJ IDEA and enabled by default.
>
>
>
> `File Watchers`, `Less` or `Sass`, `PostCSS` -    install the plugins on the Settings | Plugins page, tab Marketplace.     The plugins are available only in IntelliJ IDEA with the Ultimate subscription.

IntelliJ IDEA integrates with compilers that translate [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), and [SCSS](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax) code into [CSS](https://www.w3.org/Style/CSS/).    To use a  compiler in IntelliJ IDEA, you need to configure it as a  [File Watcher](using-file-watchers.html) based on the relevant predefined template.

> **Tip:**
> You can also use the compiler from the command line or [configure it as a third-party tool](configuring-third-party-tools.html).

## Before you start

Procedure:

1. Make sure you have [Node.js](http://nodejs.org/)  on your computer.

2. Install and enable the File Watchers plugin on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from
JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo).

3. Make sure the File Watchers and Less or Sass required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to [Managing plugins](managing-plugins.html).

## Installing Sass/SCSS

Procedure:

* In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) ,  type:

`npm install -g sass`

Learn more from the [Sass official website](https://sass-lang.com/install).

## Installing Less

Procedure:

* In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , type:

`npm install --global less`

Learn more from the [Less official website](http://lesscss.org/#using-less).

## Compiling your code into CSS

To compile your code automatically, you need to install a compiler and configure a [Sass, Less, or SCSS File Watcher](#create_file_watcher) which will track changes to your files and run the compiler.

When you open a file, IntelliJ IDEA checks whether an applicable File Watcher is available in the current project. If such File Watcher is configured but disabled, IntelliJ IDEA displays a popup that informs you about the configured File Watcher and suggests to enable it.

If an applicable File Watcher is configured and enabled in the current project, IntelliJ IDEA starts the compiler automatically upon the event specified in the [New Watcher dialog](new-watcher-dialog.html).

* If the Auto-save edited files to trigger the watcher checkbox is selected, the File Watcher is invoked as soon as any changes are made to the source code.

* If the Auto-save edited files to trigger the watcher checkbox is cleared, the File Watcher is started upon save (`File | Save All`, `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+S` (NetBeans), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))) or when you move focus from IntelliJ IDEA (upon frame deactivation).

Learn more from [File Watchers](using-file-watchers.html).

IntelliJ IDEA creates a separate file with the generated output. The file has the name of the source Sass, Less, or SCSS file and the extension `.css`. The location of the generated files is defined in the Output paths to refresh field of the [New Watcher dialog](new-watcher-dialog.html). However, in the Project Tree, they are shown under the source file which is now displayed as a node.

Procedure: Create a File Watcher

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), click File Watchers under Tools. The [File Watchers page](settings-tools-file-watchers.html) that opens shows the list of already configured File Watchers.

2. Click ![Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg) or press `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)). Depending on the tool you are going to use, choose the Less,  Sass, or SCSS predefined template from the list.

3. In the Program field, specify the path to the compiler archive depending on the chosen predefined template.

* `lessc` for Less.

* `sass` for Sass/SCSS.

If you followed the standard installation procedure with npm, IntelliJ IDEA locates the required files itself and fills in the field automatically. Otherwise, type the path manually or click ![the Browse button](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.ellipsis.svg) and choose the file location in the dialog that opens.

4. Proceed as described in [File Watchers](using-file-watchers.html).

## Example: compiling SCSS into CSS

Suppose your project is structured as follows:

![Compiling SCSS into CSS: project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_project_structure.png)

As you can see, `_grid.scss` is imported in `Page.scss`. The example below shows how `Page.scss` is compiled into CSS when you save your project manually or automatically and how the changes to `_grid.scss` are reflected in the generated CSS file.

Procedure:

1. Create a File Watcher of the type SCSS:   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Tools | File Watchers`, click ![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg) on the toolbar, and select SCSS from the list.

![Compiling SCSS into CSS: creating a File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_create_file_watcher.png)

2. In the New File Watcher dialog that opens, all the mandatory fields are already filled in.

![SCSS File Watcher: settings](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_settings.png)

Actually, these settings are sufficient to run the compiler successfully.

3. Let's change `grid.scss`, for example, replace `margin-left: 0;` at line 31 with `margin-left: 12px;`. This triggers our File Watcher and the compiler processes `Page.scss`. As a result, two files are generated and shown nested under `Page.scss`:

* `Page.css` with compiled CSS code

* `Page.css.map` with source maps that let you step through your app during a debugging session.

![SCSS File Watcher: a CSS file generated](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_css_filed_generated.png)

Although the default settings are sufficient to run the compiler successfully, let's still take a closer look at them to see how the File Watcher's behavior can be customized.

### Change the action that triggers the File Watcher

The File Watcher wakes up and launches the transpiler as soon as your project is saved manually (`File | Save All` or `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+S` (NetBeans), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))) or automatically.

In general, your code is saved automatically when you move the focus from IntelliJ IDEA (on frame deactivation). With File Watchers, auto-save is also performed when you edit a file from the File Watcher's scope. As a result, the transpiler may be running all the time you type, which may cause performance issues. To solve the problem, suppress saving edited files automatically.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Select the required File Watcher (SCSS in our example) and click ![the Edit button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.edit.svg) on the toolbar. In the Edit File Watcher dialog, expand the Advanced Options area and clear the Auto-save edited files to trigger the watcher checkbox.

![Auto-save edited files off](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_autosave_on_edit_off.png)

By default, the File Watcher wakes up even when a file from its scope is edited from outside IntelliJ IDEA. To override this behavior and transpile files only on editing internally, clear the Trigger the watcher on external changes checkbox.

![Trigger the File Watcher on external changes is off](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_on_external_changes_off.png)

### Change the scope

By default, IntelliJ IDEA monitors changes in all files with the `.scss` extension in the entire project. This works for our example. However, you can change the scope to process, for example, only uncommitted changes. In a large project, this will save time.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Select the required File Watcher (SCSS in our example) and click ![the Edit button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.edit.svg) on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list. Learn more from [Scopes and file colors](configuring-scopes-and-file-colors.html).

![SCSS File Watcher: change default scope](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_settings_change_scope.png)

### Custom output location

By default, the generated `.css` and `.css.map` files are stored in the folder where the original file is and are shown as its children in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) . You can change this default behavior to store all generated `.css` and `.css.map` files in a separate folder.

Let's start with a simple case. Suppose you have  a `custom_output.scss` file in the project root.

![Project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_project_structure_plain.png)

Let's edit `custom_output.scss`, for example, replace `fill-opacity: abs(50);` at line 6 with `fill-opacity: abs(60);`. With the default File Watcher configuration, the generated files `custom_output.css` and `custom_output.css.map` will be stored in the project root and shown as children of `custom_output.scss`.

![Default settings: the output is stored in the project root](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_default_settings.png)

It would be convenient to store all the output in a separate folder, for example, `css`. Let's create a custom SCSS_custom_output File Watcher with the `css` folder as the output location.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Then create a SCSS File Watcher [as
described above](#ws_scss_example_create_fw).

Update the default settings as follows:

* In the Arguments field, type: ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css ```

* In the Output paths to refresh field, type: ```PLAINTEXT $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map ```

![New File Watcher with custom output path](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_default_fw_updated.png)

Save the new File Watcher and make sure it is enabled.

![New File Watcher with custom output path saved and enabled](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_fw_saved.png)

Now, if you edit `custom_output.scss`, for example, replace `fill-opacity: abs(50);` at line 6 with `fill-opacity: abs(60);`, IntelliJ IDEA creates a `css` folder and stores the generated  `custom_output.css` and `custom_output.css.map` files in it.

![Custom settings: the output is stored in a separate folder](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_custom_settings.png)

### Custom output location: preserve the original folder structure

Let's now consider an example where `.scss` files are stored in a folder structure, for example:

![Project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_project_structure_tree.png)

With the default File Watcher, the generated files will be stored next to the original `.scss` files.

![Custom output:the generated files are stored under the source files](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_default_fw.png)

If we use the custom File Watcher [as
described above](#ws_sass_less_scss_example_scss_custom_output_location), all the generated files will be stored in one same `css` folder:

![Custom output: the generated files are stored in a separate folder in a plain structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_custom_fw_plain.png)

To have IntelliJ IDEA preserve the folder structure, let's create another custom File Watcher.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Then create a SCSS File Watcher [as
described above](#ws_scss_example_create_fw).

Update the default settings as follows:

* In the Arguments field, type: ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css ```

* In the Output paths to refresh field, type: ```PLAINTEXT $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map ```

![Custom output with folder structure: File Watcher updated](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_structured_fw_updated.png)

Save the new File Watcher and make sure it is enabled.

![Custom output with folder structure: File Watcher saved and enabled](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_structured_fw_saved.png)

Now, if you edit `custom_output_body.scss`, `custom_output_header.scss`, or `custom_output_footer.scss`, IntelliJ IDEA creates a `css` folder with the subfolders' structure that preserves the structure of `styles_structured`.

![Custom settings: the output is stored in a separate folder, the structure preserved](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_structured.png)

## Example: compiling Less into CSS

Suppose, your project is structured as follows:

![Compiling Less into CSS: project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_project_structure.png)

The example below shows how `my-styles.less` is compiled into CSS when you save your project manually or automatically and how the changes to `my-styles.less` are reflected in the generated CSS file.

Procedure:

1. Create a File Watcher of the type Less:   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Tools | File Watchers`, click ![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg) on the toolbar, and select Less from the list.

![Compiling Less into CSS: creating a File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_create_file_watcher.png)

Alternatively, click Yes in the Enable File Watcher to compile LESS to CSS? pane at the top of the editor tab with a `.less` file.

![Compiling Less to CSS: creating a File Watcher from the pane in the editor](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_create_file_watcher_from_pane.png)

2. In the New File Watcher dialog that opens, all the mandatory fields are already filled in.

![Less File Watcher: settings](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_file_watcher_settings.png)

Actually, these settings are sufficient to run the compiler successfully.

3. Let's change `my-styles.less`, for example, change the value of `@color` at line 1. This triggers our File Watcher. As a result, two files are generated and shown nested under `my-styles.less`:

* `my-styles.css` with compiled CSS code

* `my-styles.css.map` with source maps that let you step through your app during a debugging session.

![Less File Watcher: a CSS file is generated](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_file_watcher_css_filed_generated.png)

Although the default settings are sufficient to run the compiler successfully, let's still take a closer look at them to see how the File Watcher's behavior can be customized.

### Change the action that triggers the File Watcher

The File Watcher wakes up and launches the transpiler as soon as your project is saved manually (`File | Save All` or `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+S` (NetBeans), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))) or automatically.

In general, your code is saved automatically when you move the focus from IntelliJ IDEA (on frame deactivation). With File Watchers, auto-save is also performed when you edit a file from the File Watcher's scope. As a result, the transpiler may be running all the time you type, which may cause performance issues. To solve the problem, suppress saving edited files automatically.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Select the required File Watcher (Less in our example) and click ![the Edit button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.edit.svg) on the toolbar. In the Edit File Watcher dialog, expand the Advanced Options area and clear the Auto-save edited files to trigger the watcher checkbox.

![Auto-save edited files off](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_file_watcher_autosave_on_edit_off.png)

### Change the scope

By default, IntelliJ IDEA monitors changes in all files with the `.scss` extension in the entire project. This works for our example. However, you can change the scope to process, for example, only uncommitted changes. In a large project, this will save time.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Select the required File Watcher (Less in our example) and click ![the Edit button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.edit.svg) on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list. Learn more from [Scopes and file colors](configuring-scopes-and-file-colors.html).

![SCSS File Watcher: change default scope](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_file_watcher_settings_change_scope.png)

### Custom output location

By default, the generated `.css` and `.css.map` files are stored in the folder where the original file is and are shown as its children in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) . You can change this default behavior to store all generated `.css` and `.css.map` files in a separate folder.

Let's start with a simple case. Suppose you have  a `custom_output.less` file in the project root.

![Project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_project_structure_plain.png)

Let's edit `custom_output.less`, for example, change the value of `@color` at line 1. With the default File Watcher configuration, the generated files `custom_output.css` and `custom_output.css.map` will be stored in the project root and shown as children of `custom_output.less`.

![Default settings: the output is stored in the project root](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_result_with_default_settings.png)

It would be convenient to store all the output in a separate folder, for example, `css`. Let's create a custom Less_custom_output File Watcher with the `css` folder as the output location.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Then create a Less File Watcher [as described above](#ws_less_example_create_fw).

Update the default settings as follows:

* In the Arguments field, type: ```PLAINTEXT $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map ```

* In the Output paths to refresh field, type: ```PLAINTEXT $ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map ```

![New File Watcher with custom output path](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_default_fw_updated.png)

Save the new File Watcher and make sure it is enabled.

![New File Watcher with custom output path saved and enabled](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_fw_saved.png)

Now, if you edit `custom_output.less`, for example, change the value of `@color` at line 1, IntelliJ IDEA creates a `css` folder and stores the generated  `custom_output.css` and `custom_output.css.map` files in it.

![Custom settings: the output is stored in a separate folder](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_result_with_custom_settings.png)

### Custom output location: preserve the original folder structure

Let's now consider an example where `.less` files are stored in a folder structure, for example:

![Project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_project_structure_tree.png)

With the default File Watcher, the generated files will be stored next to the original `.less` files.

![Custom output:the generated files are stored under the source files](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_result_with_default_fw.png)

If we use the custom File Watcher [as
described above](#ws_sass_less_scss_example_less_custom_output_location), all the generated files will be stored in one same `css` folder:

![Custom output: the generated files are stored in a separate folder in a plain structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_result_with_custom_fw_plain.png)

To have IntelliJ IDEA preserve the folder structure, let's create another custom File Watcher.

Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Then create a Less File Watcher [as described
above](#ws_less_example_create_fw).

Update the default settings as follows:

* In the Arguments field, type: ```PLAINTEXT $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map ```

* In the Output paths to refresh field, type: ```PLAINTEXT $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map ```

![Custom output with folder structure: File Watcher updated](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_structured_fw_updated.png)

Save the new File Watcher and make sure it is enabled.

![Custom output with folder structure: File Watcher saved and enabled](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_structured_fw_saved.png)

Now, if you edit `custom_output_body.less`, `custom_output_header.less`, or `custom_output_footer.less`, IntelliJ IDEA creates a `css` folder with the subfolders' structure that preserves the structure of `styles_structured`.

![Custom settings: the output is stored in a separate folder, the structure preserved](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_custom_output_result_structured.png)

## Configuring syntax highlighting

You can configure Less/Sass/SCSS/PostCSS-aware syntax highlighting according to your preferences and habits.

Procedure:

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Color Scheme | Less/Sass/SCSS/PostCSS`.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in [Colors and fonts](configuring-colors-and-fonts.html).

## Complete Sass and SCSS selectors

IntelliJ IDEA provides completion for Sass and SCSS selectors - including [nested selectors](https://sass-lang.com/documentation/style-rules#nesting)  and [selectors created with an ampersand (&)](https://sass-lang.com/documentation/style-rules/parent-selector).

![Completion for Sass and SCSS selectors](https://resources.jetbrains.com/help/img/idea/2026.2/style_sheets_completion_scss.png)

## Search and navigation

[Video](https://resources.jetbrains.com/help/img/idea/2026.2/style_sheets_go_to_definition.mp4)

Procedure:

* To find usages of a Style Sheet symbol, place the caret at it and press `Alt+F7` (Windows), `⌥ F7` (macOS), `⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ U` (macOS System Shortcuts), `Alt+F7` (XWin), `Alt+Shift+7` (GNOME), `Alt+Shift+7` (KDE), `Alt+F7` (Emacs), `Alt+F7` (Sublime Text), `⌥ F7` (Sublime Text (macOS)), `Alt+F7` (NetBeans), `Shift+F12` (Visual Studio), `⇧ F12` (Visual Studio (macOS)), `Ctrl+G` (Eclipse), `⌘ ⇧ G` (Eclipse (macOS)). Learn more from  [Search for usages in a project](find-highlight-usages.html#find-usages).

* To jump from a usage of a Style Sheet symbol to its definition, press `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)). 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](navigating-through-the-source-code.html#go_to_declaration).

## Documentation look-up

For properties and pseudo-elements, IntelliJ IDEA can show you a summary from the corresponding [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS). This summary is displayed in the Documentation popup which shows a brief description of the property and its values, as well as its [Web platform Baseline status](https://web.dev/baseline).

Widely available:

![Style sheets quick documentation: Baseline, widely available](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_quick_doc_compatibility.png)

Newly available:

![Style sheets quick documentation: Baseline, newly available](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_quick_doc_compatibility_newly_available.png)

Limited availability:

![Style sheets quick documentation: Baseline, limited availability](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_quick_doc_compatibility_limited.png)

For selectors, IntelliJ IDEA also shows their [specificity](https://www.w3.org/TR/selectors-3/#specificity).

![Documentation look-up: specificity fpr selectors](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_quick_doc_specificity.png)

Procedure: View documentation for a property

* Position the caret at the property and press `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)) or select `View | Quick Documentation Lookup` from the main menu.

* When you hover over a property, IntelliJ IDEA 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, refer to [Configuring the
behavior of Documentation popup](css.html#ws_documentation_lookup_configure_popup) below.

Procedure: Configure the behavior of the Documentation popup

* To turn off showing documentation automatically when you hover over code symbols,                     Click ![the Show Options Menu icon](https://resources.jetbrains.com/help/img/idea/2026.2/app.actions.more.svg) in the popup and disable the Show on Mouse Move option.

* To have the Documentation popup shown faster or slower,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | General | Code Completion | Popup`, then select the Show the documentation popup checkbox, and specify the delay time.

Procedure: Open the MDN documentation in the browser

* In the Documentation popup `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)), click the link at the bottom.

* Press `Shift+F1` (Windows), `⇧ F1` (macOS), `⇧ F1` (IntelliJ IDEA Classic (macOS)), `⇧ F1` (macOS System Shortcuts), `Shift+F1` (XWin), `Shift+F1` (GNOME), `Shift+F1` (KDE), `Shift+F1` (Emacs), `Shift+F1` (Sublime Text), `⇧ F1` (Sublime Text (macOS)), `Shift+F1` (NetBeans), `Shift+F1` (Visual Studio), `⇧ F1` (Visual Studio (macOS)), `Shift+F2` (Eclipse), `⇧ F2` (Eclipse (macOS)) or select `View | External Documentation` from the main menu.

## Formatting

With the IntelliJ IDEA 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.

Procedure:

* To configure formatting for a Style Sheet language,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), 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.

As you change the settings, the Preview area shows how the changes affect formatting.

* In the CSS, SCSS, and Less context, IntelliJ IDEA by default uses double quotes for generated string literals in `import` statements and URLs.  To use single quotes, open the Other tab, and select Single from the Quote marks list.

To apply the chosen style to the entire file after reformatting, select the Enforce on format checkbox below the list.

> **Note:**
> Currently changing the configuration for quotation marks does not affect injected style sheets and CSS code inside the `<style>` tags.

* To reformat a code fragment, select it in the editor and press `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)).

* To reformat a file or a folder, select it in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)))  and press `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)). See [Reformat and
rearrange code](reformat-and-rearrange-code.html) for more details.

* Alternatively, you can use [Prettier](prettier.html) (`Ctrl+Alt+Shift+P` (Windows), `⌘ ⌥ ⇧ P` (macOS), `⌘ ⌥ ⇧ P` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ P` (macOS System Shortcuts), `Ctrl+Alt+Shift+P` (XWin), `Ctrl+Alt+Shift+P` (GNOME), `Ctrl+Alt+Shift+P` (KDE), `Ctrl+Alt+Shift+P` (Emacs), `Ctrl+Alt+Shift+P` (Sublime Text), `⌘ ⌥ ⇧ P` (Sublime Text (macOS)), `Ctrl+Alt+Shift+P` (NetBeans), `Ctrl+Alt+Shift+P` (Visual Studio), `⌘ ⌥ ⇧ P` (Visual Studio (macOS)), `Ctrl+Alt+Shift+P` (Eclipse), `⌘ ⌥ ⇧ P` (Eclipse (macOS))).

## Refactoring

With IntelliJ IDEA, 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.

![Style sheets: introducing a variable](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_extract_variable.animated.gif)

Procedure: Introduce variables

1. In the editor, place the caret at the expression to convert into a variable and press `Ctrl+Alt+V` (Windows), `⌘ ⌥ V` (macOS), `⌘ ⌥ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ V` (macOS System Shortcuts), `Ctrl+Alt+V` (XWin), `Ctrl+Alt+V` (GNOME), `Alt+Shift+V` (KDE), `Ctrl+Alt+V` (Emacs), `Ctrl+Alt+V` (Sublime Text), `Ctrl+Alt+V` (Sublime Text (macOS)), `Alt+Shift+V` (NetBeans), `Ctrl+R, V` (Visual Studio), `⌘ R, V` (Visual Studio (macOS)), `Alt+Shift+L` (Eclipse), `⌘ ⌥ L` (Eclipse (macOS)) 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` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) when ready.

With IntelliJ IDEA, 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.

Procedure: Introduce rulesets

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

2. Press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) and select Introduce ruleset from the list.

IntelliJ IDEA 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.

Procedure: Move rulesets to other files

1. Place the caret anywhere in the ruleset to move and press `F6` (Windows), `F6` (macOS), `F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ I` (macOS System Shortcuts), `F6` (XWin), `F6` (GNOME), `F6` (KDE), `F6` (Emacs), `F6` (Sublime Text), `F6` (Sublime Text (macOS)), `Ctrl+M` (NetBeans), `Ctrl+R, O` (Visual Studio), `⌘ R, O` (Visual Studio (macOS)), `Alt+Shift+V` (Eclipse), `⌘ ⌥ V` (Eclipse (macOS)).

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

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

![Rename refactoring](https://resources.jetbrains.com/help/img/idea/2026.2/ws_sass_rename.animated.gif)

## Checking compatibility with browsers

Besides [looking up in the
documentation popup](css.html#ws_css_documentation_lookup), you can check Style Sheet properties for compatibility with specific browsers on the fly. This inspection is based on the [MDN Browser
Compatibility Data](https://github.com/mdn/browser-compat-data) and shows you a warning every time a property is not supported in one of the targeted browsers.

![Style sheet compatibility inspection popup](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_documentation_lookup_check_compatibility_inspection_warning_popup.png)

Procedure: Turn on compatibility check

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Inspections`.

2. Expand the CSS node and select the Property is incompatible with selected browsers. In the Options area, select the browsers you want to target and the minimum versions for them.

3. In the Options area, select the browsers to check the availability of properties against. Specify the target versions of the selected browsers.

![CSS compatibility inspection settings](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_documentation_lookup_check_compatibility_inspection_settings.png)

## Managing colors

IntelliJ IDEA provides support for [CSS color](https://www.w3.org/TR/css-color-5/) management, including [code completion](auto-completing-code.html), [quick
documentation lookup](null), and [color preview](css.html#ws_css_change_color_values_use_preview). Coding assistance is provided for absolute, relative, and mixed colors.

![Coding assistance for color management](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_change_color_values_intro.png)

Procedure: Specify a color

* Place the caret at a `color` property, press `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)), and then select the desired color value or choose color... to pick a custom one.

![Choosing a color](https://resources.jetbrains.com/help/img/idea/2026.2/ws_chooseColor.png)

* To use a code instead of a human-readable color name, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) and select Convert color to <color code system> from the list, where <color code system> is [HEX](https://www.w3schools.com/colors/colors_hexadecimal.asp), [HSL](https://www.w3schools.com/colors/colors_hsl.asp), [HWB](https://www.w3schools.com/colors/colors_hwb.asp), [RGB](https://www.w3schools.com/colors/colors_rgb.asp), [lch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/lch), [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch), or [oklab](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklab).

![Use code instead of color name](https://resources.jetbrains.com/help/img/idea/2026.2/chooseColor.png)

Procedure: Change color

* Click a color icon in the gutter and pick the desired color in the popup.

![Picking a color](https://resources.jetbrains.com/help/img/idea/2026.2/ws_colorPicker.png)

* Alternatively, place the caret at a color property, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), select Change color from the list, and then pick the required color in the popup.

![Change color - context menu](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_change_color_values_change_color_context_action.png)

Procedure: Toggle color preview

IntelliJ IDEA shows preview for absolute, relative, and mixed colors.

![Color preview intro](https://resources.jetbrains.com/help/img/idea/2026.2/ws_css_change_color_values_use_preview.png)

* By default, IntelliJ IDEA displays color preview as icons in the gutter. To show color preview in the background,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Appearance` and select the Show CSS color preview as background checkbox.

![Show color preview in the background](https://resources.jetbrains.com/help/img/idea/2026.2/colorPreview_background.png)

* To restore the color preview gutter icons,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | General | Gutter Icons` and select the Color preview checkbox in the Common area.

![Enable color preview in the gutter](https://resources.jetbrains.com/help/img/idea/2026.2/colorPreview.png)

## Viewing the styles applied to a tag

In HTML, XHTML, JSP and JSPX files, IntelliJ IDEA can show you all the styles applied to an arbitrary tag.

![Viewing the styles applied to the tag <body>](https://resources.jetbrains.com/help/img/idea/2026.2/ws_show_styles.png)

Procedure:

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

IntelliJ IDEA 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, IntelliJ IDEA 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 ![the Navigate to Tag toolbar button](https://resources.jetbrains.com/help/img/idea/2026.2/app.actions.preview.svg) 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](https://resources.jetbrains.com/help/img/idea/2026.2/app.actions.preview.svg) on the toolbar of the right-hand pane.

## See also

### Procedures

[File Watchers](using-file-watchers.html) [Minifying CSS](compressing-css.html)

### Reference

[File Watchers](settings-tools-file-watchers.html) [New Watcher Dialog](new-watcher-dialog.html)

### External Links

[http://sass-lang.com/](http://sass-lang.com/) [http://lesscss.org/](http://lesscss.org/) [http://www.nongnu.org/scss/](http://www.nongnu.org/scss/)