Stylus:

Stylus es un nuevo lenguaje revolucionario, que proporciona una forma eficiente, dinámica y expresiva para generar CSS. Soporta tanto una sintáxis con sangría y estilo normal CSS.

Gulp:

GulpJS es un automatizador de tareas escrito en JavaScript y que corre bajo Node.js que sigue la misma filosofía que Grunt. GulpJS mejora en cuanto a facilidad de programación y rapidez a la hora de ejecutar las tareas.

¿Qué necesitamos para compilar nuestro Stylus?

1) Necesitamos descargar Node.js para poder instalar Gulp y Stylus.

2) Creamos un archivo llamado package.json y en el escribimos lo siguiente:

{
  "name": "Stylus",
  "version": "1.0.0",
  "description": "Creando css con Stylus",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": 'David Paredes",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-notify": "^2.2.0",
    "gulp-stylus": "^2.1.0"
  },
  "dependencies": {
    "gulp-concat": "^2.6.0",
    "gulp-concat-css": "^2.3.0",
    "gulp-uglify": "^2.0.0",
    "install": "^0.8.1",
    "npm": "^3.10.8"
  }
}

3) Abrimos nuestra Terminal, nos dirigimos a la carpeta de nuestro proyecto, ejecutamos el comando npm install y esperamos a que descarguen las dependencias.

4) Creamos un archivo llamado gulpfile.js y escribimos lo siguiente.

var gulp = require('gulp');
var notify = require('gulp-notify');
var stylus = require('gulp-stylus');

gulp.task('stylus', function () {
    return gulp.src('./path/*.styl')
      .pipe(stylus())
      .pipe(notify("Stylus se compilo correctamente!"));
});

gulp.task('watch', function () {
    gulp.watch('./path/*.styl', ['stylus']);
});

gulp.task('default', ['watch']);

5) Para compilar nuestro Stylus ejecutamos el comando.

gulp

¿Cúal es la sintáxis de Stylus?

Stylus:

body
  color white
  background green
  font-size 15px

Resultado de Stylus en CSS:

body {
  color: white;
  background: green;
  font-size: 15px;
}