Je pense que beaucoup d’entres vous ont entendu parler de SASS (ou encore de LESS qui est son principal concurrent). Je me concentre aujourd’hui sur SASS car c’est de loin le plus utilisé.
Pour résumer, SASS est ce qu’on l’appelle un préprocesseur CSS. C’est un langage qui va apporter tout un tas de fonctionnalités qui ne sont pas présentes en CSS et qui vont vous simplifier la vie. Je peux citer par exemple :
- l’utilisation de variables (il sera par exemple possible de déclarer la couleur principale utilisée dans votre site, d’utiliser cette variable partout où vous en aurez besoin, et si demain vous voulez changer la couleur il suffira de le faire à un seul endroit)
- le nesting, on peut utiliser des styles imbriquées, simplifie grandement l’écriture et la compréhension
- organiser ses styles en plusieurs fichiers
- des mixins, ce sont des fonctions réutilisables dans votre fichier
- des opérateurs +, -, *, / et %
- et plein de choses
Le SASS va s’adresser à des personnes qui connaissent un minimum l’utilisation de CSS et qui souhaitent simplifier grandement leur façon de travailler. Et je peux vous dire qu’une fois que vous l’aurez utilisé vous ne pourrez plus revenir en arrière. Sauf si le CSS implémente ce type de fonctions (d’ailleurs ils ont déjà commencés, on peut maintenant utiliser des variables en CSS).
Pour moi la plus grand complexité de ce langage est sa compilation. L’inconvénient c’est qu’il ne suffit pas d’enregistrer le fichier et il est lisible par votre navigateur, il est nécessaire de le compiler. Ce n’est pas chose aisée lorsque l’on débute et qu’on est allergique au terminal. Mais beaucoup d’éditeurs proposent des extensions très pratiques.
Je ne vais pas ici vous apprendre à utiliser le préprocesseur SASS, mais plutôt vous indiquer les différentes ressources qui pourraient vous être utiles pour le faire (en français). Il y a évidemment de nombreuses ressources sur le web, mais voici quelques une qui me paraissent les plus utiles et de qualité :
Librairie : SASS pour les web designers
En terme de livre, si j’en avais à conseiller qu’un c’est celui de chez Eyrolles. Il est particulièrement bien réalisé. C’est d’ailleurs celui-ci qui m’a permis de commencer à apprendre ce langage. Il est facile à lire, et l’avoir à côté de soi est bien utile. En plus de ça il n’est pas bien cher, à peine 12€ à ce jour à la Fnac (ce n’est pas un lien affilié).
Tutoriels vidéo
- Le premier tutoriel que je vous propose s’appelle Boostez votre CSS avec Sass et est dispo sur tuto.com. Dans ce tuto vous allez apprendre à utiliser SASS, d’abord en installant ce qu’il faut pour le compiler et ensuite à utiliser les fonctionnalités de base et avancées. La formation est plutôt complète et facile à suivre.A la fin de la formation vous aurez le certificat qui va bien.
Comme j’en parlais dans cet article, en tant que lecteur du blog barbu du web je peux vous faire bénéficier de 20% de réduction sur votre première commande. Pour cela il vous suffit de vous inscrire sur cette page.
En voici un petit extrait :
- Si vous souhaitez juste installer SASS pour compiler vos fichiers sur votre machine (MAC ou PC) vous pouvez également suivre cette formation gratuite sur tuto.com : Le couteau Suisse du développeur web. La seule condition c’est de s’inscrire sur la plateforme tuto.com pour pouvoir en bénéficier. Formation qui d’ailleurs propose aussi beaucoup d’autres outils à installer comme Node.JS, Composer…
Autres ressources
- La documentation officielle de SASS, mais qui est en anglais.
- sassmeister.com : un bac à sable qui va vous permettre de tester SASS
- pour les utilisateurs de l’excellent VS Code, vous pouvez utiliser l’extension Live Sass Compiler qui se charge de compiler les fichiers SASS à chaque enregistrement
Avec tout ça vous devriez normalement réussir à installer votre premier préprocesseur et commencer à l’utiliser dans vos projets.