How to start styling in Mendix (Gulp & Sass)

(Edit: 27 Sept 2019) Mendix just released their Calypso Sass compiler, which needs less setup than the gulp compiler making it easier for most everyday styling needs.)

All credits go to Jelte, the genius that created the Git repo.

Are you here to answer one question: What is the most efficient way to turn my sweet sweet designs into something your browser understands?

For quick guide, visit Jelte’s Git repo here.
If you are like me and not super technical, or not confident with Terminal, Gulp and Sass, then this guide is for you.

What do we want?

Sass (for styling like a pro)
Auto-refresh (makes life easy)
Gulp (makes all the above work)

Prerequisites

1- Install nodeJS from here

2- Install Gulp by typing in the terminal npm install gulp-cli -g

Installation

1- Download gulp.zip here

2- Unzip in your project root folder.

3- In your terminal and go to your project root folder by type cd than dragging your root file into the terminal.
If you do this on Windows and you encounter errors with installing the dependencies, open your CMD or Powershell as Administrator.

4- Install dependencies using npm install

Usage

1- In your root type gulp devYou should still be in your root if you just finished the installation and otherwise type cd than dragging your root file into the terminal.

2- make sure your Mendix project is running

That’s it.
For a quick test to see if everything is working, go to theme/styles/sass/custom/_custom-variables.scss and type:
body{ background-color: red; }Your background will be a beautiful red, and that’s it.