À la découverte de Sinatra #3 - Utiliser SASS/SCSS dans un projet Sinatra

Comme nous l'avons évoqué dans un article précédent (voir par ailleurs : 3 raisons d'aimer SCSS), SASS/SCSS est un pré-processeur de CSS qui apporte à vos feuilles de style un lot de fonctionnalités qui vont vous faciliter la vie et alléger votre code. Il devient très vite impossible de s'en passer ! Nous allons reprendre le projet Sinatra débuté dans les articles À la découverte de Sinatra #1 - Hello World et À la découverte de Sinatra #2 - Routes et templates, et ajouter SASS dans le cadre de ce projet pour alléger nos feuilles de style et profiter de la souplesse apportée par SASS.

Tout le code correspondant à ce troisième article sera disponible sur mon dépôt bitbucket pabuisson/blog-decouverte-sinatra déjà utilisé dans les billets précédents, avec le tag partie-3. Pour le récupérer et lancer le projet :

1
2
3
$ git clone git@bitbucket.org:pabuisson/blog-decouverte-sinatra.git
$ git checkout -f partie-3
$ cd blog-decouverte-sinatra && bundle && rackup

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 le développement de projets personnels. Comme beaucoup de framework web Ruby, il s'appuie sur le 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 d'ailleurs tout à fait développer un site web directement 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

Notre projet Sinatra est d'ores et déjà fonctionnel. Première étape avant d'utiliser Sass, nous allons tout d'abord ajouter la dépendance sass à notre Gemfile. Rien de plus simple, il suffit d'ajouter la ligne suivante à notre fichier Gemfile, à la racine du projet :

1
2
# Gemfile
gem 'sass'

Puis lancer la commande bundle pour installer le gem, et ensuite hop, ready to rock !

Fichier Rackup

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ./config.ru

#
# On importe sass/plugin/rack depuis le gem sass
# Et on indique à Rack d'utiliser le middleware fourni par ce gem
#
require 'sass/plugin/rack'
use Sass::Plugin::Rack

#
# Le reste de votre fichier config.ru, qui indique comment lancer
# l'application. Par exemple, pour un projet Sinatra basique:
#
require './app.rb'
run Sinatra::Application

Avec les deux premières lignes, on indique 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, nous sommes prêts à utiliser Sass dans notre projet Sinatra !

⚠️ Attention, cela implique que désormais, pour lancer notre projet sinatra, nous ne devons plus utiliser la commande $ ruby app.rb qui ne prendrait pas en compte le fichier config.ru que l'on vient de créer, mais la commande $ rackup. À noter que $ ruby app.rb lançait Sinatra sur le port 4567 par défaut tandis que $ rackup utilisera par défaut le port 9292.

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)transpilé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] = :compressed

# Emplacement des fichiers SASS/SCSS. Défaut: 'public/stylesheets/sass/'
Sass::Plugin.options[:template_location] = ...

# Emplacement où sont générés les CSS transpilés. Défaut: 'public/stylesheets/'
Sass::Plugin.options[:css_location] = ...

Traduisons nos CSS en SCSS

Jusqu'à présent, notre projet Sinatra contenait une unique feuille de styles ./public/stylesheets/app.css. Première étape, étant donné ce que nous venons de voir : créons un répertoire /public/stylesheets/sass/, renommons notre fichier app.css en app.scss et déplaçons-le dans notre nouveau répertoire :

1
2
$ mkdir public/stylesheets/sass
$ mv public/stylesheets/app.css public/stylesheets/sass/app.scss

Le fichier app.scss sera donc transpilés en CSS dans le répertoire public/stylesheets/app.css. Comme c'est là que se trouvait notre ancien fichier CSS, nous n'avons même pas besoin de mettre à jour nos layouts qui pointent déjà vers le bon emplacement. Et étant donné que la syntaxe SCSS est rétro-compatible avec la syntaxe CSS, nous devons d'ores et déjà pouvoir afficher une page sans erreur.

Lançons notre serveur :

1
2
3
4
$ rackup
[2018-05-21 18:00:40] INFO  WEBrick 1.3.1
[2018-05-21 18:00:40] INFO  ruby 2.3.3 (2016-11-21) [x86_64-darwin15]
[2018-05-21 18:00:40] INFO  WEBrick::HTTPServer#start: pid=88205 port=9292

Et rendons-nous sur localhost:9292 pour nous assurer que tout se passe bien :

Sinatra reloaded with SCSS
Bingo, ça fonctionne!

Conclusion

Maintenant, ne reste plus qu'à réellement nous servir de la syntaxe SCSS : à nous les joies du nesting, des variables, des mixins, des modules ! Je vous laisse voir mon précédent article 3 raisons d'aimer SCSS dans lequel je décris les principaux avantages que je trouve à ce super outil. Je vous laisse vous rendre sur le bitbucket du projet pour voir le fichier SCSS final, après qu'il a été restructuré.

Vous pouvez récupérer le code source de cet exemple que j'ai mis à disposition sur mon dépôt bitbucket pabuisson/blog-decouverte-sinatra :

1
2
3
$ git clone git@bitbucket.org:pabuisson/blog-decouverte-sinatra.git
$ git checkout -f partie-3
$ cd blog-decouverte-sinatra && bundle && rackup

Références