CSS Préprocesseur SASS

Introduction générale

L’utilisation de CSS (Cascading Style Sheets) est très répandue et remonte à plusieurs années (depuis 1996), elle a pour objectif de mettre en place une mise en forme spécifique aux pages Web utilisant des propriétés CSS.

Face aux enjeux de la digitalisation de ces dernières années et de l’importance accrue du canal Web et particulièrement de la couche front au niveau de développement des applications Web, l’utilisation du CSS seul présente des limites notamment en terme de qualité de code, de sa maintenabilité et de productivité. Nous présentons dans cet article comment SASS permet de remédier à ces limites .

SASS : un préprocesseur CSS

SASS (Syntactically Awesome Stylesheet) est un préprocesseur pour CSS, il permet de générer dynamiquement du code CSS tout en offrant un langage évolué, une syntaxe simple et un code facilement réutilisable et maintenable.

SASS permet d’utiliser des concepts avancés comme les variables, les règles imbriquées et d’implémenter le principe d’héritage. Ce qui rend le code plus structuré mais aussi permet de créer des feuilles de style plus rapidement.

SASS et SCSS : quelles différences entre les deux ?

Il existe deux syntaxes que nous pouvons utiliser afin d’écrire notre code SASS :

• La forme originale, appelée indented syntax ou simplement SASS, elle fonctionne avec des indentations et des sauts de ligne.
• Une variante plus récente qui s’appelle donc Sassy CSS ou SCSS, c’est-à-dire CSS dans le style de SASS. La principale différence par rapport à la forme originale est dans l’utilisation des crochets et des points-virgules.

Comment installer SASS ?

Afin d’installer SASS dans notre machine, il suffit d’exécuter npm install node-sass ou yarn add node-sass . puis nous mettons nos fichiers CSS avec l’extension .scss ou .sass.

Avantages et inconvénients de SASS ?

Un des avantages majeurs de SASS est que le langage du préprocesseur donne plus de possibilités et de flexibilité dans la création du code. Par exemple, il est possible de stocker les couleurs dans des variables au lieu d’utiliser le code hexadécimal du couleur.

Le respect du principe DRY (Don’t repeat yourself) utilisant les mélanges, les variables, l’héritage et l’imbrication permet de rendre le code plus clean et sans duplications ce qui réduit les modifications à de nombreux endroits.

Cependant, le code SASS nécessite une compilation avant d’être appliqué, c’est pour cela que nous ne pouvons pas visualiser les modifications immédiatement sur une page Web car notre code SASS doit d’abord être traduit en CSS pure avant que les navigateurs ne puissent le prendre en considération.

Fonctions et concepts de base du préprocesseur SASS

Imbrication de sélecteurs CSS avec SASS

L’imbrication nous permet de cibler facilement les éléments d’une page Web (utilisant des balises Html) à l’aide des sélecteurs CSS, afin d’avoir une bonne organisation et lisibilité à l’ensemble du code CSS.

Variables

Cette fonctionnalité permet de stocker les informations et les valeurs dans des variables pour les réutiliser ultérieurement dans la mise en page de notre site Web par exemple. Elle nous facilite aussi la mise à jour, donc pas de besoin de faire des modifications dans différents endroits.

@Import VS @Include VS @Extend

@import est pour inclure le contenu d’un fichier dans un autre.

@include est pour inclure le code écrit dans un bloc Mixin.

@extend est pour hériter des propriétés d’un autre sélecteur CSS.

Fichiers partiels

Nous pouvons également utiliser des fichiers partiels, le but est de minimiser nos fichiers styles.

Les conditions et les boucles SASS

SASS nous permet de contrôler le flux de nos scripts à travers des expressions spécifiques qui évaluent les conditions.

En fonction du résultat de ces conditions, SASS exécutera certaines sections de code spécifiées.

Les règles sont les suivantes :

• @if et @else: Une instruction if évaluera une condition. Si la condition s’avère vraie, le compilateur exécutera le bloc de code de l’instruction if, si la condition s’avère fausse, le compilateur passera au code en dehors et en dessous du bloc de code de l’instruction if, l’instruction else fonctionne comme une solution de repli fourre-tout pour tout ce qui n’est pas couvert par une instruction if ou une échelle if.

• @each La boucle each itérera sur les éléments d’une collection du début à la fin.
  Il n’a pas de bloc conditionnel comme @while, et nous ne pouvons pas spécifier le nombre de fois que la boucle doit s’exécuter comme @for .
  La boucle each commencera au premier élément de la liste ou de la carte et continuera jusqu’à ce qu’elle atteigne le dernier élément.

• @while La boucle while comprend un bloc conditionnel. Si l’évaluation s’avère vraie, elle continuera à parcourir une section de code jusqu’à ce que la condition s’avère fausse.

• @for La boucle for parcourt une section de code un nombre de fois spécifié.
  Une boucle @for se compose de 3 parties :
  1. La variable de compteur pour garder une trace de l’itération en cours
  2. Le numéro à partir duquel commencer la boucle.
  3. Le numéro vers lequel boucler.

Héritage

SASS nous permet d’hériter des propriétés d’autres sélecteurs pour réduire la quantité de code que nous devons taper et/ou combiner nous devons faire.

A titre d’exemple, considérons que nous avons deux boutons qui ont exactement la même apparence, à l’exception de la police et des couleurs d’arrière-plan. Nous pouvons définir un style de bouton de base, puis laisser chacun des deux boutons hériter de toutes les propriétés de celui-ci et ajouter leurs propres propriétés personnalisées.

Les Mixins SASS

Mixin nous aide à créer les fonctions pour définir des styles qui peuvent être réutilisés dans notre feuille de style.

Conclusion

L’utilisation des préprocesseurs CSS comme SASS est devenue presque une exigence de qualité notamment au niveau des grands projets Web. SASS permet de bénéficier d’un langage de script évolué, des concepts avancés, d’améliorer considérablement la qualité de code, la productivité et de monter en maturité par rapport à un usage CSS classique.

Cependant, nous recommandons pour un débutant en intégration Web d’apprendre d’abord CSS puis de le pratiquer davantage seul avant de passer à SASS. Cet apprentissage permet de mieux comprendre les concepts de base de CSS avant de passer à un préprocesseur permettant de mieux structurer cet usage.