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 que je conçois 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. La plus simple, SassMeister, permet de convertir en ligne du code. Cependant, cette solution implique de recopier à la main 🖐 son code à chaque fois que l'on souhaite le compiler.

  2. La solution intermédiaire est d'utiliser un logiciel se chargeant de la compilation. Par exemple, Prepros permet de surveiller votre code SASS et de le compiler à chaque changement.

  3. La solution idéale, mais légèrement plus complexe consiste à utiliser un 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, nous verrons comment compiler du SASS via Vite.

Alternatives