Stylus

Stylus is a CSS preprocessor, which adds special features such as variables, nested rules and mixins into regular CSS.

Configuring Stylus

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

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 Stylus 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 Stylus file while inspecting pages with developer tools.

Nib Library

Enable the Use Nib option if you are importing Nib library in your Stylus files.

Line Numbers

Line Numbers option allows you to output comments in the CSS file containing the file name and line number of a rule set in the input Stylus file.

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. Enable this 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.styl with the following imports.

@import "b.styl";
@import "c.styl";
@import "d.styl";

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

Learn more about Stylus from Stylus website.