Utiliser SASS dans un projet Sinatra

Comme nous l'avons évoqué dans l'article précédent "3 raisons d'aimer SCSS", SASS/SCSS est un pré-processeur de CSS qui apporte à vos feuilles de style un lot de fonctionnalités destinées à vous faciliter la vie et à alléger votre code. Nous allons voir comment utiliser SASS dans le cadre d'un projet Sinatra.


Sinatra et Rack

Sinatra est un framework web très léger (mais néanmoins puissant) en Ruby, que j'affectionne particulièrement et que j'utilise régulièrement pour du prototypage ou pour le développement de projets personnels. Sinatra s'appuie en interne sur la gem rack qui, selon les mots même de son créateur, fournit "une interface minimale pour connecter les serveurs web qui supportent Ruby (Webrick, mongrel, Thin, etc.) avec les frameworks Ruby (comme Rails, Sinatra, Merb, etc.)".

Note: Vous pouvez très bien développer un site web avec Rack, sans avoir recours à un framework tel que Sinatra ou Padrino, auquel cas la méthode exposée ici devrait également fonctionner. À vous de me signaler si ce n'est pas le cas :)

Mise en place

Ajout de SASS au Gemfile

Je suppose que votre projet Sinatra (ou Rack) est d'ores et déjà fonctionnel. Première étape, nous allons tout d'abord ajouter la gem 'sass' à notre Gemfile. Rien de plus simple, il suffit d'ajouter la ligne suivante à votre fichier Gemfile, à la racine du projet :

1
2
# Gemfile
gem 'sass'

Puis lancer la commande bundle pour appliquer ce changement. Et hop, ready to rock !

Fichier Rackup

Rack fournit différents outils, et notamment rackup qui permet de lancer des applications Rack. Pour modifier son comportement, on utilise des fichiers de configuration dont l'extension habituelle est le .ru (ru comme RackUp, car oui, on est des fous !). Par défaut, Rackup recherche le fichier de configuration config.ru : nous allons donc créer ce fichier à la racine du projet et indiquer à Rack qu'il doit utiliser Sass en ajoutant les deux lignes suivantes :

1
2
3
4
5
6
7
8
9
10
# fichier config.ru
require 'sass/plugin/rack'
use Sass::Plugin::Rack

# 
# Le reste de votre fichier config.ru
# Par exemple pour un projet Sinatra basique:
#
require './app.rb'
run Sinatra::Application

Avec les deux premières lignes, vous indiquez tout simplement à Rack qu'il doit utiliser le MiddleWare Sass (un Middleware dans le monde Rack représentant un composant utilisé lors du processing de la requête HTTP). Et c'est tout, vous êtes prêt à utiliser Sass dans votre projet Sinatra !

Utilisation de SASS

C'était plutôt simple, n'est-ce pas ? À partir de maintenant, lorsque vous lancerez votre serveur au moyen de la commande rackup, le middleware Sass sera chargé et examinera à chaque nouvelle requête vers le serveur les fichiers SASS/SCSS localisés dans le répertoire public/stylesheets/sass. En cas de modification, les fichiers modifiés seront alors (re)compilés au format CSS dans le répertoire public/stylesheets.

Le middleware SASS accepte bien évidemment de nombreuses options vous permettant de l'adapter à vos besoins :

1
2
3
4
5
6
7
8
# Pour compresser les fichiers CSS générés
Sass::Plugin.options[:style] = :compact`` 
# Pour modifier l'emplacement des fichiers SASS/SCSS
# Par défaut: 'public/stylesheets/'
Sass::Plugin.options[:template_location]`` = ...
# Pour modifier l'emplacement où sont générés les CSS compilés
# Par défaut: '{:css_location}/sass/'
Sass::Plugin.options[:css_location]`` = ...

Références