Using Pug & Sass

Sass (Syntactically Awesome Style Sheets)

Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass gives you the power of variables, mixins, functions, etc.

Pug (former Jade)

Pug is a high performance Node.js Templating Engine. Just like SASS, Pug is a prepocessor and, as such it helps you accomplishing tasks like wrapping away repetitive work by providing features not available in plain HTML like variables, includes, mixins, functions, etc.

Compiling Sass (Scss) and Pug

The fastet way is up and going with Sass (Scss) and Pug is to use Gulp setup that comes with Around. Check Dev environment setup article for the instructions.

If you are not using Node.js and Gulp setup, don't like command line interface there are another ways to work with preprocessors:

1. Live Sass Compiler for VS Code - We personally recommend Visual Studio Code editor with Live Sass Compiler plugin installed. Visual Studio Code is a free software developed by Microsoft. It's avalable on Mac OS, Windows and Linux.

2. Prepros - a popular software (GUI) for compiling Sass and Pug . Visit it's website at https://prepros.io/. Basic version is completely free and available for Mac and Windows.