Sass, SCSS, and Less

The File Watcher wakes up and launches the transpiler as soon as your project is saved manually (File | Save All or Ctrl0S) or automatically.

In general, your code is saved automatically when you move the focus from Aqua (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 CtrlAlt0S to open settings and then select Tools | File Watchers. . Select the required File Watcher (SCSS in our example) and click 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.

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

By default, Aqua 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 CtrlAlt0S to open settings and then select Tools | File Watchers. , select the required File Watcher (SCSS in our example) and click on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list.

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

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.

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 CtrlAlt0S to open settings and then select Tools | File Watchers. , then create a SCSS File Watcher as described above.

Update the default settings as follows:

• In the Arguments field, type:

  $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

• In the Output paths to refresh field, type:

  $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

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

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

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

With the default File Watcher, the generated files will be stored next to the original .scss files. If we use the custom File Watcher as described above, all the generated files will be stored in one same css folder:

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

Press CtrlAlt0S to open settings and then select Tools | File Watchers. , then create a SCSS File Watcher as described above.

Update the default settings as follows:

• In the Arguments field, type:

  $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css

• In the Output paths to refresh field, type:

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

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

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

The File Watcher wakes up and launches the transpiler as soon as your project is saved manually (File | Save All or Ctrl0S) or automatically.

In general, your code is saved automatically when you move the focus from Aqua (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 CtrlAlt0S to open settings and then select Tools | File Watchers. . Select the required File Watcher (Less in our example) and click 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.

By default, Aqua 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 CtrlAlt0S to open settings and then select Tools | File Watchers. , select the required File Watcher (Less in our example) and click on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list.

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

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.

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 CtrlAlt0S to open settings and then select Tools | File Watchers. , then create a Less File Watcher as described above.

Update the default settings as follows:

• In the Arguments field, type:

  $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map

• In the Output paths to refresh field, type:

  $ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

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

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

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

With the default File Watcher, the generated files will be stored next to the original .less files. If we use the custom File Watcher as described above, all the generated files will be stored in one same css folder:

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

Press CtrlAlt0S to open settings and then select Tools | File Watchers. , then create a Less File Watcher as described above.

Update the default settings as follows:

• In the Arguments field, type:

  $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map

• In the Output paths to refresh field, type:

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

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

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