Sass and SCSS in Compass Projects
CLion supports development in projects structured in compliance with the Compass framework. This framework uses Sass and SCSS extensions of CSS.
Preparing for Compass development
- Download and install Ruby.
- Specify a
path
variable for the folder where the Ruby executable file and thegem.bat
file are stored. This lets you launch Ruby and Gem Manager from any folder and ensures that Ruby is successfully launched during compilation. - Install Compass.
- The installation is performed in the command line mode. To start the built-in Terminal, hover your mouse pointer over
in the lower left corner of the IDE, then choose Terminal from the menu (see Working with Embedded Local Terminal for details).
- Type the following command at the command prompt:
gem install compass
The tool is installed to the folder where Ruby executable file and the
gem.bat
file are stored.
- The installation is performed in the command line mode. To start the built-in Terminal, hover your mouse pointer over
Setting up a Compass project
You can have a project set up according to the Compass requirements in two ways: create a new Compass project or create an empty project and introduce a Compass-specific structure in it. In either case, a project is set up through command line commands. Of course, you can set up a Compass project externally and then open it in CLion.
During project set-up, a conf.rb
configuration file is generated. You will need to specify the location of this file when integrating Compass with CLion.
- To set up the Compass-specific structure in an existing project:
- Open the desired project in CLion.
- Open the built-in Terminal by hovering your mouse pointer over
in the lower left corner of CLion and choosing Terminal from the menu.
- At the command prompt, type:
compass init
- To create a Compass project from scratch:
- Open the desired project in CLion.
- Open the built-in Terminal by hovering your mouse pointer over
in the lower left corner of CLion and choosing Terminal from the menu.
- Switch to the folder that will be the parent for the new project folder. Type the following command:
cd <parent folder name>
- At the command prompt, type:
compass create <the name of the project to be created>
Integrating Compass with CLion
To develop a Compass-specific project in CLion, you need to specify the Compass executable file compass
and the project configuration file config.rb
. You can do it either through the Compass Support page of the Settings dialog box or on the fly using an intention action that opens the Compass Support dialog box.
- Open the Compass page or dialog box by doing one of the following:
- Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing for Windows and Linux or for macOS, and click Compass under Languages & Frameworks.
-
- In a
.sass
or.scss
file, type the following import statement:@import 'compass'
- Click the red bulb icon or press Alt+Enter. Then choose Configure Compass from the suggestion list.
- In a
- To activate Compass support, select the Enable Compass support checkbox.
- In the Compass executable file text box, specify the location of the
compass
executable file under the Ruby installation. Type the path manually, for example,C:\Ruby200-x64\bin\compass
, or choose it from the drop-down list, or click the Browse buttonand choose the location of the
compass
file in the dialog box that opens. - In the Config path field, specify the location of the project Compass configuration file
config.rb
. Type the path manually, for example,C:\my_projects\\compass_project\config.rb
, or choose it from the drop-down list, or click the Browse buttonand choose the location of the
compass
file int he dialog box that opens.The Compass configuration file
config.rb
is generated during project set-up throughcompass create
orcompass init
commands.
Creating a Compass Sass or a Compass SCSS compiler
Sass and SCSS are not processed by browsers that work with CSS code. Therefore to be executed, Sass or SCSS code has to be translated into CSS. This operation is referred to as compilation and the tools that perform it are called compilers.
CLion integrates with a compiler that translates Sass and SCSS code from a Compass project without changing the Compass-specific project structure. To use the compiler in CLion, you need to configure it as a File Watcher. For each supported compiler, CLion provides a predefined File Watcher template. To run a compiler in your project, create a project-specific File Watcher based on the relevant template.
CLion provides a common procedure and user interface for creating File Watchers of all types. The only difference is in the predefined templates you choose in each case.
- Install and enable the File Watchers repository plugin.
The plugin is not bundled with CLion, but it is available from the plugin repository. See Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins for details.
- To start creating a File Watcher, open the Settings/Preferences dialog box by choosing File Watchers under the Tools node. The File Watchers page that opens, shows the list of File Watchers that are already configured in the project. for Windows and Linux or for macOS on the main menu, and then click
- Click the Add button
or press Alt+Insert and choose the compass sass or compass scss predefined template from the pop-up list.
- In the Program text box, specify the path to the executable file:
-
compass.bat
for Windows -
compass
for Unix and macOS
and choose the file location in the dialog box that opens.
-
- In the Arguments text box, type one of the following depending on the operating system used:
- For macOS:
-
compile $ProjectFileDir$
to process an entire directory -
compile $ProjectFileDir$ $FilePath$
to process a single file
-
- For Windows:
-
compile $UnixSeparators($ProjectFileDir$)$
to process an entire directory -
compile $UnixSeparators($FilePath$)$
to process a single file
-
- For Linux (Ubuntu):
-
compile $ProjectFileDir$
to process an entire directory -
compile $ProjectFileDir$ $FilePath$
to process a single file
-
- For macOS:
Running a Compass Sass or Compass SCSS compiler
When you open a Sass or SCSS file, CLion checks whether an applicable file watcher is available in the current project. If such file watcher is configured but disabled, CLion displays a pop-up window 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, CLion starts it automatically upon the event specified in the New Watcher dialog.
- 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 ( , Ctrl+S) or when you move focus from CLion (upon frame deactivation).
CLion creates a separate file with the generated output. The file has the name of the source Sass or SCSS file and the extension css
. The location of the generated files is defined in the Output paths to refresh text box of the New Watcher dialog. However, in the Project Tree, they are shown under the source file which is now displayed as a node.