4-1 Retour Sass

Sass est une extension de CSS, ajoutant des règles supplémentaires, des variables, mixins, héritage de sélecteurs, etc.

Le Sass est ensuite traduit en CSS standard en utilisant un outil de ligne de commande ou un build system comme Vite.

Il permet d'écrire du CSS de façon beaucoup plus efficace et permet de réduire les répétitions. De plus, le support pour les variables permet de réutiliser des couleurs et autres paramètres du genre en les définissant qu'une seule fois.

Prenons un exemple très standard de CSS:

.button {
  padding: .5rem .75rem;
  border-radius: .5rem;

  color: #000;
  background-color: #e9e9e9;
  text-decoration: none;
}

.button:hover {
  color: #000;
  background-color: #d0d0d0;
}

Rien de dramatique, mais on répète .button pour lui assigner :hover.

Sass permet d'éviter cette répétition de la façon suivante:

.button {
  padding: .5rem .75rem;
  border-radius: .5rem;

  color: #000;
  background-color: #e9e9e9;
  text-decoration: none;
  
  &:hover {
    color: #000;
    background-color: #d0d0d0;
  }
}

info

On peut imbriquer des déclarations et utiliser & pour faire référence au sélecteur parent.

Fonctions prédéfinies

Plusieurs fonctions prédéfinies font partie de Sass. Un module que j'apprécie particulièrement est celui pour jouer avec les couleurs.

Par exemple, pour le hover sur le bouton, j'aimerais réutiliser la même couleur, mais plus foncée. On peut utiliser darken:

.button {
  padding: .5rem .75rem;
  border-radius: .5rem;

  color: #000;
  background-color: #e9e9e9;
  text-decoration: none;
  
  &:hover {
    color: #000;
    background-color: darken(#e9e9e9, 10%);
  }
}

La fonction inverse, lighten() existe aussi. Pour la liste complète des fonctions de couleur, c'est par ici: https://sass-lang.com/documentation/modules/color

Variables

Dans les exemples précédents, la couleur #e9e9e9 est répétée deux fois pour à peu près le même usage.

On peut définir une variable et la réutiliser de la façon suivante:

$secondary-color: #e9e9e9;

.button {
  padding: .5rem .75rem;
  border-radius: .5rem;

  color: #000;
  background-color: $secondary-color;
  text-decoration: none;

  &:hover {
    color: #000;
    background-color: darken($secondary-color, 10%);
  }
}

Imbrication de sélecteurs

Au-delà de &:hover, le même principe peut être utilisé avec des sélecteurs de classe.

Par exemple, pour définir ce qui serait défini en CSS sur le bouton comme:

.button.button-primary {
    color: #fff;
    background-color: #198754;
}

$secondary-color: #e9e9e9;

.button {
  padding: .5rem .75rem;
  border-radius: .5rem;

  color: #000;
  background-color: $secondary-color;
  text-decoration: none;

  &:hover {
    color: #000;
    background-color: darken($secondary-color, 10%);
  }
  
  &.button-primary {
    color: #fff;
    background-color: #198754;
  }
}

Imbrication pour items parents-enfants

Par exemple, si on voulait ajouter une badge sur un bouton:

$secondary-color: #e9e9e9;

.button {
  position: relative;
  padding: .5rem .75rem;
  border-radius: .5rem;

  color: #000;
  background-color: $secondary-color;
  text-decoration: none;

  .badge {
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    left: 100%;

    background: red;
    color: #fff;
    padding: .25rem;
    font-size: .75rem;
    border-radius: 1rem;
  }
}

Cette définition de classe CSS est l'équivalent de définir une autre classe .button .badge.