Show Topics
Getting Started
Compilers
Other Tools

Sass

Sass is a CSS extension language. It adds variable, mixins etc to CSS files.

File Options

Sass

  • Output Path

    You can click the path to manually change the output path of the file to a custom folder or use Output Settings to adjust output path for all scss files.

  • Auto Compile

    Enable this option to compile a file every time you save it in a code editor.

  • Sourcemap

    Enable this option to create a sourcemap (.map) file for easier debugging.

  • Line Numbers (Ruby Sass Only)

    Enable this option to dump line numbers in output files.

  • Output Style

    • Nested -> Output CSS file in nested format.
    • Expanded -> Output CSS file in expanded format. Easier to read and debug.
    • Compact -> Output one CSS block per line.
    • Compressed -> Use Minify CSS option to output a minified file.
  • Autoprefixer

    Enable this option to add vendor prefixes to css. Check Autoprefixer help post to learn more.

  • Minify

    Enable this option to minify css file.

    Imported Files

    If you are importing a sass file or partial from another file, the importing file is compiled whenever a imported file is saved in code editor.

    @import "b";
    @import "c.scss";
    //This file is compiled whenever b.scss or c.scss is changed
    

Compiler Options

Sass

Compilers

  • Libsass/Node-sass

    Libsass is a faster version of ruby sass. Prepros uses libsass by default to compile sass files.

  • Ruby Sass

    Ruby Sass is slower then Libsass but currently bit more stable. To use ruby sass go to Project Options -> Compiler Options -> Sass then change Process With option to Ruby Sass.

Using Frameworks

  • Compass

    You have to use slower ruby sass to use Compass. Prepros 6 doesn't support config.rb files because compass is no longer being developed by it's developers. I recommend Bourbon instead of Compass.

    @import "compass";
    
  • Bourbon, Neat and Susy

    Prepros supports bourbon neat and susy out of the box. You can just import them to your project without any additional configuration.

    @import "bourbon";
    @import "susy";
    @import "neat";
    

Learn more about Sass from Sass website