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 and Pug

Again, if you are not using Node.js and Gulp setup, don't like command line interface there is another way to work with preprocessors. There is a popular software (GUI) for compiling Sass and Pug called "Prepross". Visit it's website at https://prepros.io/. Basic version is completely free and available for Mac and Windows.