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.
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 uses LibSass, the C implementation of Sass to compile files. You can enable Node-Sass from Project Settings -> CSS Tools -> Sass.
Ruby-Sass is the deprecated Ruby implementation of Sass. Prepros doesn't support Ruby-Sass.
Click the output file path to manually change it or use project wide output options to adjust output path for all Sass files.
Enable this option to create a sourcemap (
.map) file along with the output CSS file.
SourceMap file allows you to find the original position of rule sets and properties in the Sass file while inspecting pages with developer tools.
Enable this option to output comments in the CSS file containing the file name and line number of a rule set in the input Sass file. This option is only available with Node-Sass.
Use this 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.
Use this option to set the format of the output CSS file. This option is only available with Node-Sass, Dart-Sass outputs expanded CSS by default.
Use this option to indent output CSS with spaces or tabs.
Use this option to set the number of spaces or tabs to use while indenting output CSS.
Enable this option to add vendor prefixes to the output CSS file with Autoprefixer.
Enable this option to minify the output CSS file.
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.
@import 'b'; @import 'c.scss'; // This file will compiled automatically whenever you edit b.scss or c.scss
Use partial file name prefixed with an underscore (eg: _imported.scss) if you don't want Prepros to automatically compile a file whenever you edit it.
You can can use Bourbon, Neat, Susy after installing them with NPM
@import "../node_modules/bourbon/core/bourbon"; // relative path of the bourbon module @import "../node_modules/bourbon-neat/core/neat"; // relative path to the neat module @import "../node_modules/susy/sass/susy"; // relative path of the susy module
Prepros doesn't support Compass. I recommend Bourbon instead.
Learn more about Sass from Sass website.