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. But if you decide to go with any option described below you have to update the paths to Bootstrap files. By default they are imported from node_modules folder. But if you don't use Npm / Gulp setup and don't run npm install you will not have the node_modules folder. In that case you can find Bootstrap files inside assets/vendor folder. So you have to update all @import(s) inside your sass files to poit to the right directory assets/vendor.

The files to look up for are:

• src/scss/_utilities.scss
• src/scss/_variables.scss
• src/scss/theme.scss

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.