Compile Sass on Windows and Mac

Sass (which stands for Syntactically Awesome Style Sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. There are multiple implementations of Sass.

Dart-Sass

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. Prepros uses Dart-Sass by default to compile files.

Node-Sass

Node-Sass uses LibSass, the C implementation of Sass to compile files. You can enable Node-Sass from Project Settings -> CSS Tools -> Sass.

Ruby-Sass

Ruby-Sass is the deprecated Ruby implementation of Sass. Prepros doesn’t support Ruby-Sass.

Configuring Sass

You can configure Sass from Project Settings -> CSS Tools -> Sass.

Change Output Destination

Click the output path on the file options sidebar to manually change the output path of a file. You can also use project wide output options to adjust output path for all Sass files.

Source Maps

Enable the SourceMap option to create a sourcemap (.map) file along with the output CSS file. SourceMap files allow you to find the original position of rule sets and properties in the Sass file while inspecting pages with developer tools.

Source Comments

Enable the Source Comments option to output comments in the CSS file containing the file name and line number of a rule set in the input Sass file. Dart Sass doesn’t support source comments.

Precision

Use the Precision option to set how many digits after the decimal will be allowed. For instance, if you have a decimal number of 1.23456789 and a precision of 5, the result will be 1.23457 in the final CSS. This option is only available with Node-Sass, Dart-Sass always uses 10 digit precision.

Output Style

Use the Output Style option to set the format of the output CSS file. Output Style option is only available with Node-Sass, Dart-Sass outputs expanded CSS by default.

Nested — Nest rule sets.
Expanded — Separate rule sets and properties with a new line. Makes it easier to read and debug.
Compact — Output one rule set per line.

Indent Type

Use the Indent Type option to indent output CSS with spaces or tabs.

Indent Width

Use the Indent Width option to set the number of spaces or tabs to use while indenting output CSS.

Prefix CSS

Enable the Prefix CSS option to add vendor prefixes to the output CSS file with Autoprefixer.

Minify CSS

Enable the Minify CSS option to minify the output CSS file.

Imported Files

Prepros compiles the parent file whenever you edit an imported file. Prepros also re-scans imported files whenever you edit a file. Refresh project with CTRL+R or CMD+R to manually re-scan imported files.

For instance if you have a file called a.scss with the following imports.

@use 'b.scss';
@import 'c.scss';
@import 'd.scss';

Prepros will process a.scss whenever you edit b.scss, c.scss or d.scss.

Import Globbing

You can optionally enable import globbing from Project Settings -> CSS Tools -> Sass. This option allows you to import multiple Sass files with a glob pattern.

@import 'hello/*.scss';

This will import all .scss files in the hello folder in the alphabetical order.

Issues with Globbing

Even though globbing makes it easier to import a lot of files, It is not recommended. CSS relies on the order of selectors for specificity and importing all Sass files in the alphabetical order can lead to subtle issues related to specificity. Source-maps also won't work if you use globbing.

Sass Frameworks

Bourbon, Neat and Susy

You can can use Bourbon, Neat, Susy after installing them with NPM

// relative path of the bourbon module
@import '../node_modules/bourbon/core/bourbon';

// relative path to the neat module
@import '../node_modules/bourbon-neat/core/neat';

// relative path of the susy module
@import '../node_modules/susy/sass/susy';

Compass

Compass is deprecated and very old. Prepros doesn’t support Compass. I recommend Bourbon instead.

Learn more about Sass from Sass website.