• A la une
  • Catégories
  • Dossiers
  • +

Petit guide d'utilisation des pré-processeurs CSS #2 Un peu d'algorithmique

par Benjamin SANCHEZle 15/03/2017

Suite de l'article Petit guide d'utilisation des pré-processeurs CSS #1. Aujourd'hui, les bases de l'algorithmique.

L'algorithmique c'est quoi ?

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 ressortier 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.

Comment ca marche ?

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.

Attention tout de meme

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir