Sass: les bases du style syntaxiquement génial!

Sass (Syntactically Awesome Style Sheets) est un langage d’extension pour le CSS. Il ajoute de nombreuses fonctionnalités au CSS de base: des variables, des fonctions, des opérateurs et davantage.

Sass s’accompagne d’un préprocesseur qui transforme les syntaxes du langage Sass en CSS valide. Ainsi, les syntaxes du langage Sass elles-mêmes ne sont pas comprises par le navigateur. Elles servent simplement d’entrée au préprocesseur, installé sur votre ordinateur, qui produira du CSS interprétable par le navigateur. Il y a deux syntaxes: la syntaxe Sass qui utilise les tabulations pour distinguer les blocs et la syntaxe SCSS qui est similaire au CSS avec les accolades. Ce tutoriel, à l’instar de la plupart des tutoriels de CSSActif, utilise la syntaxe SCSS.

Sass est un outil puissant qui permet d’écrire des feuilles de style maintenables et réutilisables en appliquant le principe DRY (Don’t Repeat Yourself). Bien que le langage permette d’implémenter de la logique complexe, 95% de tout ce que vous voudrez faire avec Sass se résume aux bases qui suivent.

Installation

Il existe plusieurs façons d’installer et d’exécuter Sass, de même que de l’intégrer à votre projet. La procédure d’installation complète est disponible sur le site officiel de Sass (en anglais). Les étapes pour installer et utiliser Sass sur votre ordinateur Windows se trouvent ci-dessous.

Si vous voulez simplement expérimenter avec Sass pour ce tutoriel, essayez l’un des éditeurs en ligne: SassMeister, Sass.js, ou CodePen (inscription requise).

Installation et utilisation (Windows)

Cette procédure décrit comment installer et utiliser Sass via la ligne de commande PowerShell sous Windows.

Installation

  1. Naviguez vers la page officielle de Sass sur Github: Releases · sass/dart-sass · GitHub
  2. Téléchargez la version la plus récente de Dart Sass, sous la forme dart-sass-X.X.X-windows-x64.zip ou dart-sass-X.X.X-windows-ia32.zip, selon la version de votre système d’exploitation.
  3. Via l’explorateur de fichiers, repérez l’emplacement où l’archive a été téléchargée (par exemple, dans vos Téléchargements).
  4. Effectuez un clique droit sur l’archive, puis sur Extraire Tout.
  5. Saisissez l’emplacement où Sass sera extrait sur votre ordinateur. De préférence, utiliser un chemin court, exempt de caractères spéciaux, et facile à retenir (vous en aurez besoin plus tard). Dans mon cas, j’ai saisi C:\outilsdev.
Étape 5 - Extraction de l'archive Sass
  1. Naviguez, via l’explorateur de fichiers, vers l’emplacement que vous avez choisi. Notez que le répertoire dart-sass est présent à cet emplacement.

Il faut désormais ajouter ce chemin à votre PATH. Le PATH est une variable que les utilitaires de ligne de commande (PowerShell ou CMD) utilisent pour repérer les exécutables sur votre ordinateur.

  1. Tapez « variables d’environnement » dans le champ de recherche de Windows, juste à côté du bouton Démarrer en bas de l’écran.
  2. Cliquez sur le résultat « Modifier les variables d’environnement système ».
  3. Dans la fenêtre Propriétés système qui s’ouvrira, cliquez sur le bouton Variables d’environnement…
  4. Dans la fenêtre Variables d’environnement, cliquez une fois sur Path dans les Variables systèmes.
  5. Cliquez sur Modifier…
Étapes 7 à 11
  1. Dans la fenêtre Modifier la variable d’environnement, cliquez sur Nouveau.
  2. Saisissez (ou copiez-collez) le chemin du répertoire dart-sass, incluant ce dernier, par exemple C:\outilsdev\dart-sass.
Étapes 12 et 13
  1. Cliquez sur OK sur cette fenêtre et toutes les fenêtres précédentes.

Vous avez terminé l’installation 😀. Ensuite, nous testerons l’installation et compilerons notre première feuille de style Sass (SCSS).

Test de l’installation

  1. Ouvrez PowerShell (vous pouvez utiliser le champ de recherche du menu Démarrer). Attention: si vous aviez une fenêtre PowerShell ouverte lors de l’installation, assurez-vous de fermer toutes les fenêtres.
  2. Saisissez la commande sass --version.
    • Si vous obtenez un numéro de version en sortie de la console, c’est que Sass a été installé correctement.
    • Sinon, validez que le bon chemin a été ajouté à votre PATH.
  3. Fermez PowerShell.

Utilisation

Finalement, nous allons créer notre première feuille de style Sass 🎉.

  1. Créez un dossier pour votre projet, à l’emplacement que vous souhaitez, grâce à l’explorateur de fichiers.
  2. Dans l’explorateur de fichiers, en maintenant la touche Maj. (ou Shift) appuyée, cliquez droit sur votre dossier de projet, puis sur Ouvrir la fenêtre PowerShell ici.
  3. Une fenêtre PowerShell s’ouvrira. Notez que le chemin vers votre dossier y apparait. Minimisez la fenêtre pour l’instant.
  4. À l’aide de votre éditeur de texte simple préféré (ou Notepad), créez un nouveau fichier.
  5. Ajoutez-y le code CSS ou SCSS de votre choix (ou laissez-le vide). Voici un exemple simple pour débuter:
$body-bg: lightgray;
body {
    background-color: $body-bg;
}
  1. Sauvegardez-le dans le dossier de votre projet, avec l’extension .scss (par exemple: style.scss). Attention: si vous utilisez Notepad, entrez "style.scss" (avec les guillemets) dans le champ Nom du fichier de la fenêtre de sauvegarde. Sinon, Notepad sauvegardera votre fichier comme style.scss.txt 😣.
  2. Retournez vers votre fenêtre PowerShell.
  3. Entrez la commande sass style.scss build/style.css, en remplaçant style.scss par le nom de votre fichier Sass.
  4. Une fois la commande terminée (cela devrait être rapide), notez que le dossier build a été crée dans votre répertoire de projet. Il contient vos fichiers style.css et style.css.map (ne vous préoccupez pas de ce dernier).

Voilà! Vous avez généré votre première feuille de style CSS avec Sass! Notez que si vous faites des modifications à votre fichier style.scss, vous devez exécuter la commande de l’étape 8 à nouveau pour que ces changements s’appliquent. Pour faciliter votre développement, vous pouvez utiliser le paramètre --watch. Alors, le préprocesseur Sass détectera les changements effectués à votre fichier et compilera automatiquement en CSS. La commande complète est: sass --watch style.scss build/style.css, à utiliser à l’étape 8.

Vous êtes prêts à faire le saut dans la syntaxe du SCSS avec Sass.

Variables

Les variables sont une des fonctionnalités les plus utiles de Sass. La syntaxe de base est $<variable>: <valeur>;. Le nom commence toujours par un signe de dollar $. La valeur peut contenir un nombre, une couleur et, de façon générale, n’importe quelle valeur assignable à une propriété en CSS.

$couleur-theme: #ff00ff;
$bordure-titre: solid 3px $couleur-theme;
h1 {
  color: $couleur-theme;
  border: $bordure-titre;
}
h1 {
   color: #ff00ff;
   border: solid 3px #ff00ff;
}

L’avantage est que vous pouvez modifier la valeur de $couleur-theme à un seul endroit pour qu’elle soit appliquée à l’ensemble votre feuille de style.

Opérateurs

Sass permet d’effectuer les opérations +-*/, et % sur des variables et des valeurs.

$taille-titre: 2.5rem;
h1 {
    font-size: $taille-titre;
}
h2 {
    font-size: $taille-titre * 80%;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}

Imbrication

L’imbrication permet de créer des sélecteurs descendants (du type selecteur1 selecteur2, où le style s’applique à tous les élements correspondants à selecteur2 qui ont un ancêtre selecteur1) sans avoir à répéter le sélecteur ancêtre pour chaque sélecteur enfant. Il est possible d’imbriquer sur plusieurs niveaux.

ul.tags {
     list-type: none;
     margin: 0;
     padding: 0;
     li {
         display: inline-block;
         a {
             background-color: black;
             &:hover {
                 background-color: lightgray;
             }
         }
     }
 }
ul.tags {
   list-type: none;
   margin: 0;
   padding: 0;
 }
 ul.tags li {
   display: inline-block;
 }
 ul.tags li a {
   background-color: black;
 }
 ul.tags li a:hover {
   background-color: lightgray;
 }

Notez que & permet de désigner le sélecteur ancêtre. C’est utile lorsqu’on veut référer à l’ancêtre directement (sans espace), pour lui appliquer un pseudo-sélecteur par exemple.

Héritage

L’héritage permet de partager des propriétés entre plusieurs sélecteurs via la règle @extend.

.bouton {
    background-color: darkslateblue;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: white;
}
.bouton-supprimer {
    @extend .bouton;
    background-color: red;
}
.bouton, .bouton-supprimer {
   background-color: darkslateblue;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   color: white;
}
.bouton-supprimer {
   background-color: red;
}

Dans cet exemple, .bouton et .bouton-supprimer partagent le même code. Un bloc additionnel redéfinit la couleur de fond de .bouton-supprimer. Il est également possible d’hériter de sélecteurs artificiels de type %nomdubloc. Il s’agit de blocs qui ne seront pas ajoutés au CSS de sortie. L’exemple suivant est presque équivalent au précédent.

%bouton-base {
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
     color: white;
 }
 %pas-utile {
     color: red;
 }
 .bouton {
     @extend %bouton-base;
     background-color: darkslateblue;
 }
 .bouton-supprimer {
     @extend %bouton-base;
     background-color: red;
 }
.bouton-supprimer, .bouton {
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   color: white;
 }
 .bouton {
   background-color: darkslateblue;
 }
 .bouton-supprimer {
   background-color: red;
 }

Remarquez que les sélecteurs %bouton-base et %pas-utile n’apparaissent pas dans la sortie CSS. Par contre, puisque %bouton-base apparait dans les règles @extend de .bouton et .bouton-supprimer du côté SCSS, le code qu’il contient apparait du coté CSS dans le bloc .bouton-supprimer, .bouton.

Couleurs

Les fonctions de couleurs de Sass sont particulièrement utiles lorsqu’il s’agit d’élaborer des thèmes ou des effets comme éclaircir la couleur d’un lien au survol. Il existe de nombreuses fonctions, en voici certaines des plus utiles.

$couleur: #499380;
* {
    /* base */ 
    color: $couleur; 
    /* lighten */ 
    color: lighten($couleur, 20%);  
    /* darken */ 
    color: darken($couleur, 20%); 
    /* adjust-hue */ 
    color: adjust-hue($couleur, 20%); 
    /* saturate */ 
    color: saturate($couleur, 20%); 
    /* desaturate */ 
    color: desaturate($couleur, 20%); 
    /* grayscale */ 
    color: grayscale($couleur); 
    /* changer l'opacite */
    color: rgba($couleur, 0.4);
} 

* {
  /* base */
  color: #499380;
  /* lighten */
  color: #81c1b0;
  /* darken */
  color: #274f45;
  /* adjust-hue */
  color: #498d93;
  /* saturate */
  color: #33a98b;
  /* desaturate */
  color: #5f7d75;
  /* grayscale */
  color: #6e6e6e;
  /* changer l'opacite */
  color: rgba(73, 147, 128, 0.4);
}
Couleur de base
lighten() (éclaicir)
darken() (assombrir)
adjust-hue() (ajuster la teinte)
saturate()(saturer)
desaturate() (désaturer)
grayscale() (nuance de gris)
Changer l’opacité avec rgba()

Mixins

Les mixins permettent de réutiliser votre code SCSS sans avoir à le répéter à plusieurs endroits. Les mixins acceptent zéro ou plusieurs paramètres. Pour les déclarer, le syntaxe générale est: @mixin <nom_de_mixin>([$<paramètre>]) { <contenu> }. Il est possible de donner une valeur par défaut aux paramètres, comme montré dans l’exemple.

@mixin bouton-base($couleur: darkslateblue)
{
     background:$couleur;
     box-shadow: 0.2rem 0.2rem rgba($couleur, 0.3);
     &:hover {
         background:lighten($couleur, 20%);
     }
}
.bouton {
    @include bouton-base();
}
.bouton-supprimer {
    @include bouton-base(red);
}
.bouton-valider {
    @include bouton-base(forestgreen);
}
.bouton {
   background: darkslateblue;
   box-shadow: 0.2rem 0.2rem rgba(72, 61, 139, 0.3);
}
.bouton:hover {
  background: #7a6ec0;
}
.bouton-supprimer {
  background: red;
  box-shadow: 0.2rem 0.2rem rgba(255, 0, 0, 0.3);
}
.bouton-supprimer:hover {
  background: #ff6666;
}
.bouton-valider {
   background: forestgreen;
   box-shadow: 0.2rem 0.2rem rgba(34, 139, 34, 0.3);
}
.bouton-valider:hover {
   background: #42d142;
}

Une fois ces bases maîtrisées, vous ne pourrez plus vous passer de Sass pour vos projets! Consultez la documentation officielle de Sass (en anglais) pour en apprendre davantage sur toute la puissance du langage.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *