Introduction

SASS ou Syntactically Awesome Style Sheets est un préprocesseur CSS. Autrement dit, il s'agit d'un langage permettant de générer du code CSS. Pourquoi ne pas écrire directement du CSS alors? Afin bénéficier des avantages que procure SASS! Tel que les variables, le nesting, les partials, les mixins, etc.

Utilisation

L'usage de SASS est très répandue. Plusieurs sites et librairies d'envergures l'utilisent, notamment:

Syntaxes

SASS offre deux syntaxes de base différentes .sass et .scss.

SASS

La syntaxe SASS fut la syntaxe originale de SASS (d'où son nom). Elle se base principalement sur l'indentation du code ainsi que les sauts de ligne. Afin de la différencier de SASS le préprocesseur, cette syntaxe est souvent surnommée la "syntaxe indenté".

Dans le cadre de ce cours, nous, nous concentrerons surtout sur la syntaxe .scss. Nous n'élaborerons donc pas trop sur la syntaxe .sass.

SCSS

La syntaxe SCSS est la plus récente et répandue. Elle ressemble au CSS traditionnel, ce qui la rend facile à apprendre pour quiconque comprend les bases du langage CSS et incorpore les avantages de la syntaxe .sass. Cette syntaxe est souvent surnommée "Sassy CSS".

CodePen

Pour écrire du SCSS dans CodePen, il suffit de cliquer sur la roue dentelée ⚙️ à la gauche du titre de l'onglet CSS et choisir son option de préprocesseur SCSS.

🤫 Tous les exercices qui ont été conçus dans le cadre de ce cours sont d’abord écrits en SCSS et sont ensuite convertis en CSS. Compilation

Il existe plusieurs solutions disponibles afin de compiler du code SASS en CSS afin que les navigateurs puissent l'interpréter:

  1. Un outil en ligne tel que Sass Playground, permet de convertir du code de scss vers css. Cependant, cette solution implique de recopier à la main 🖐 son code à chaque fois que l'on souhaite le compiler.
  2. Avec Visual Studio Code, il y a une panoplie d'extentions que vous pouvez installer pour que votre sass/scss se compile en css. Live Sass Compiler est un très bon exemple.
  3. Une solution idéale, mais légèrement plus complexe consiste à utiliser un module bundler. Par exemple: webpack, Rollup, Vite, etc. Ces bundlers peuvent être installés directement dans un projet, simplifiant et uniformisant ainsi le travail entre les membres d'une équipe.
Dans le cadre de ce cours, pour la séance d'aujourd'hui, nous utliserons l'extention de Visual Studio Code nommée Live Sass Compiler. Plus tard, vous serez introduits à un module bundler et vous l'utiliserez notemment pour compiler votre code SASS en CSS. Alternatives à Sass