SASS (Syntactically Awesome Style Sheets)

SASS: un autre pré-processeur pour CSS

SASS (qui signifie Syntactically Awesome Style Sheets) est un pré-processeur pour le langage CSS. Il a été créé il y a quelques années par Hampton Catlin et Nathan Weizenbaum. Tout comme le langage LESS (qu'on a vu dans un cours précédent) il permet de générer dynamiquement du code CSS tout en offrant une syntaxe simple et un code facilement réutilisable et maintenable.

Les premières versions de SASS utilisaient la syntaxe indentée inspirée du HAML (HTML Abstraction Markup Language). Il utilisait un vocabulaire différent du CSS conventionnel et des indentations bien précises pour ses propriétés. Ce facteur n'a pas encouragé les intégrateurs et développeurs font-end de s'y lancer puisqu'ils étaient habitués à la simplicité de la syntaxe CSS classique, et ils n'étaient pas prêts à s'y jeter du jour au lendemain.

La version 3 de SASS a apporté une amélioration très tentante du langage en introduisant la syntaxe SCSS (Sassy CSS) qui est proche du CSS classique et qui rend également celui-ci compatible avec les compilateurs SASS. Autrement dit, le fait d'écrire un document SASS en CSS est syntaxiquement correct.

Malgré que SASS est CSS sont syntaxiquement proches l'un de l'autre, SASS est surtout vu comme un langage de programmation. En effet, il utilise les principaux fondements de celui-ci comme les variables, les fonctions, la logique conditionnelle, et bien évidemment, la compilation.

Pour le reste du cours, nous allons voir la syntaxe SCSS (plutôt que la syntaxe indentée) vu qu'il est simple est proche du CSS et rend celui-ci compatible, donc réutilisable.

Installation de SASS

SASS est écrit en Ruby et distribué via son gestionnaire de paquets RubyGems. Pour le compiler, on peut se servir de kits préinstallés comme Koala et CodeKit, ou passer via la ligne de commande de la manière suivante:

Sur Windows

1. Il faut commencer par installer Ruby en le téléchargeant à partir du lien suivant https://rubyinstaller.org/.
2. A la fin de l'installation, un fichier executable nommé Start command prompt with Ruby sera créé. Il faudra ensuite le lancer (en tant qu'administrateur car des modifications du système peuvent s'en suivre).
3. L'invite de commande sera lancé et on pourra ensuite utiliser le gestionnaire de paquet Gem pour installer SASS via la commande suivante:
   
   gem install sass
   

Sur Mac OS

1. Une installation par défaut de Ruby est déjà fournie avec le système, mais li faut quand même veiller à la mettre à jour.
2. Sur le terminal on tape la commande suivante:
   
   sudo gem install sass
   
   Bien entendu, il faudra communiquer son mot de passe Administrateur
   

Faire fonctionner le compilateur de SASS

L'installation précédente étant terminée et SASS est correctement installé sur notre ordinateur, il faut maintenant le faire fonctionner.

Tout d'abord, notez que l'objectif est de créer un fichier SASS et le compiler pour en obtenir un fichier CSS. Pour ce faire, on va considérer que nous disposons d'un dossier de travail nommé ProjetSASS. Dans ce dossier nous allons créer deux sous dossiers nommés respectivement sass et css, bien entendu, le premier sert à stocker le code SASS et le deuxième contiendra la feuille (ou les feuilles) de style CSS résultante de la compilation.

Ensuite nous allons créer un fichier SASS dans notre dossier sass, on le nommera style.scss. Vous avez bien noté l'extension, il s'agit de .scss car nous allons utiliser la syntaxe SCSS qui est plus facile et compatible avec CSS.

Désormais, c'est dans ce fichier styles.scss que nous allons écrire notre code.

La compilation

Pour faire compiler le fichier style.scss nous allons vérifier le changement du code édité avec watch. Pour cela on va se placer dans le dossier projetSASS et exécuter la commande suivante (sur l'invite de commande ou terminal):
Un fichier du même nom (mais avec l'extension .css) sera créé dans le dossier css et sera actualisé après chaque modification (et enregistrement) du code SASS édité. C'est le fichier CSS résultant qui sera inclus dans votre page HTML comme ceci:

Pré-requis

SASS est un langage relativement simple, il ne demande qu'à être à l'aise avec le langage CSS et avoir déjà manipulé un lange de programmation quelconque.

Voilà le lien du cours de CSS (Cascading Style Sheets) sur ce site.