Using a Sass file

A CSS preprocessor is a CSS extension language that allows you to enhance CSS with code (variables, for example) and then compile it into plain CSS. CSS Preprocessor Sass is integrated in Connect.
For more information about Sass, see: Sass website.

Adding a Sass file

To add a Sass file:

1. Right-click the Stylesheet folder on the Resources pane, and click New SCSS Stylesheet.
2. Enter a name for the file as it appears in the Stylesheet resources.
   When the name of Sass file begins with an underscore, it is considered a partial .scss file (e.g. _mySass.scss). Partial files are typically imported in a base .scss file. They may include Sass variables or other directives declared in the base file, and they cannot be compiled.

Compiling a Sass file

A Sass file needs to be compiled into a plain CSS file before it can be applied to a section. To compile it:

1. Open the Stylesheet folder on the Resources pane.
2. Right-click the .scss file and select Compile.

The compiled style sheet will have the same name as the Sass file, but with the extension .css.
Compiled CSS files can be recognized by their first line: /* Compiled by https://sass-lang.com/libsass */.
Compiler options can be set in the Preferences; see Editing preferences.