Petit guide d’utilisation des préprocesseurs CSS - l'algorithmique

L'algorithmique est l'étude et la production de règles et techniques qui sont impliquées dans la définition et la conception d'algorithmes, c'est-à-dire de processus systématiques de résolution d'un problème permettant de décrire précisément des étapes pour résoudre un problème algorithmique.

En d'autres termes, un algorithme est une suite finie et non-ambiguë d’instructions permettant de donner la réponse à un problème.

Algorithmique, Wikipedia

Bien que cette definition puisse faire peur, je suis sur que tout le monde va comprendre avec notre exemple : une recette de cuisine.

– Choisissez entre "fermes", "al dente" et "fondantes". NOMMONS "cuisson voulue" votre choix pour la suite de cette recette.
– Mettez de l'eau dans une casserole
– Allumez le feu sous la casserole
– TANT QUE l'eau ne bout pas, attendez
– Mettez les "pates" dans l'eau
– TANT QUE les pates ne sont pas cuites
  – Attendez 3 minutes
  – Goutez une pâte
  – SI la cuisson de la pâte est égale à la "cuisson voulue"
  – ALORS
    – Les pates sont cuites
  – SINON
    – Les pâtes ne sont pas cuites
– Servez.

Je pense que la recette ci-dessus vous semble légèrement étrange, car je l'ai légèrement mis en forme pour faire ressortir ce que je voulais démontrer, mais dites-vous bien que toutes les recettes de cuisine, toutes les instructions Ikea, toutes les fiches d'impositions sont des algorithmes: une suite finie et non-ambiguë d’instructions permettant de donner la réponse à un problème.

Comme vous pouvez le voir sur la "recette" précédente, un algorithme est une suite d'instructions, qui sont prises en compte de haut en bas. Sauf cas particuliers, les instructions se prennent dans l'ordre, on passe à la suivante à la fin du traitement de chaque instruction.

Notez les mots que j'ai mis en gras. Ce sont des instructions particulières, qui servent à contrôler le flux du code.

TANT QUE, par exemple fait entrer le code dans une boucle tant que la condition qui suit n'est pas égale à "vrai".

SI, de son cote, permet de conditionner l'exécution du code a une condition. SI la condition est vraie, ALORS on fait ça, SINON on fait cette autre chose.

Il est évidemment possible d'aller plus loin dans la complexité, pour travailler avec des préprocesseurs CSS, c'est loin d'être nécessaire. Je vais même aller plus loin, et dire que si vous avez besoin de plus qu'une simple boucle et une simple condition dans du SCSS, il serait peut-être temps de vous demander comment simplifier cela.

Les bases du SCSS : maths, mixins et variables

Pour les bases de Sass, je vous redirige vers leur guide, qui explique cela très bien et très simplement. Je ferais éventuellement un article pour traduire quelques points du guide, mais avec quelques efforts (et la traduction google à la limite) vous devriez vous en sortir sans trop de soucis.

Les algorithmes en SCSS

Utiliser la logique algorithmique en Sass n'est vraiment pas quelque chose de complique, meme si cela peut faire peur au debut. Il n'y a que 4 mots-cles a comprendre : @for, @each, @if et @while.

@for permets de dupliquer des lignes. Son fonctionnement est simple : donnez-lui un point de départ, un point d'arrivée, et il va "boucler" autant de fois que nécessaire pour rejoindre les deux. Notez aussi le $i, qui permet de connaitre de "chiffre" actuel.

@for $i from 1 through 4 {
  .for-#{$i} {
    width: 60px + $i * 10 ;
  }
}

@each fonctionne comme @for, mais avec une liste de valeurs. Il va boucler en commençant avec la première valeur, et avancer vers la fin de la liste jusqu'à ce que toute la valeur est étée utilisée une fois.

$list: adam john wynn mason kuroir

@each $author in $list
  .photo-#{$author} {
    background: image-url("avatars/#{$author}.png") no-repeat
  }

@if correspond à notre "SI" de l'exemple precedent, et permet donc d'exprimer ou non une serie de lignes CSS en fonction d'une condition. Vous l'utiliserez principalement dans des mixins ou des boucles, rarement pour elle-même.

Son fonctionnement est le plus simple de tous :

@if $author != john
  display: block
@else
  display: none

Enfin, @while est une boucle signifiant "TANT QUE", et qui va boucler tant que la condition qui lui a été donnée est vrai. Cette boucle est la seule qui peut vous "exploser à la figure", et sans aucun doute celle que vous verrez le moins souvent sur Codepen. Je ne vais donc pas vous l'expliquer pour rester simple, et vous déconseille de l'utiliser de manière générale tant que vous ne savez pas ce que vous faites avec.

Je m'arrête là pour les explications ! Sachez juste que je suis reste au plus simple, et que si/quand vous vous en sentirez prêt, vous pourrez toujours creuser plus loin pour en découvrir davantage.

Pour plus d'informations, d'exemples et autre, je vous redirige vers l'excellent site thesassway.com, dont les exemples actuels sont (pus ou moins) extrait.

Les préprocesseurs CSS permettent d'utiliser de l'algorithmique, et cela peut rendre énormément service, néanmoins, la prudence est de mise. Avant chaque usage, demandez-vous si du simple CSS ne pourrait suffire pour la tache que vous avez en tete, et à quoi va ressembler le CSS en sortie.