Gestion des erreurs dans SASS

Cet article explique la gestion des erreurs dans SASS.

Nous expliquerons comment créer des styles robustes en utilisant les fonctionnalités d’erreur, d’avertissement et de débogage de SASS.

YouTube Video

Gestion des erreurs dans SASS

Qu'est-ce que la 'gestion des erreurs' dans SASS ?

SASS n'est pas un langage qui gère les exceptions à l'exécution, mais il offre un mécanisme permettant de détecter les états invalides à la compilation et de notifier clairement le développeur. Cela permet d'éviter que des valeurs incorrectes ou des erreurs de conception soient produites sous forme de CSS sans que personne ne s'en rende compte.

Dans SASS, la gestion des erreurs ne consiste pas uniquement à 'arrêter lorsqu'il y a une défaillance', mais sert aussi de moyen d'exprimer directement les hypothèses de conception dans le code. Quatre méthodes principales sont proposées pour cela.

Arrête immédiatement la compilation lorsqu'une condition non autorisée par la conception est détectée.

Vous avertit des problèmes sous forme d'avertissements, mais la compilation se poursuit.

Affiche les variables et les résultats de calcul pour aider à confirmer le flux des valeurs et l'état interne.

• Conditions de garde (@if) Vérifie à l'avance les valeurs d'entrée et les préconditions pour prévenir les problèmes avant qu'ils ne se produisent.

@error : Interrompt de manière fiable les erreurs fatales

Utilisez @error pour des situations absolument inacceptables dans votre conception. Si une mauvaise valeur est transmise, la compilation échoue immédiatement.

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}

• Ce mixin arrête la compilation si autre chose qu'un nombre lui est transmis. Ceci est très efficace comme 'ultime garde-fou' pour éviter une utilisation involontaire.

Utilisation pratique de @error incluant la vérification des unités

Même s'il s'agit d'un nombre, utiliser une unité incorrecte peut poser problème. Dans SASS, vous pouvez utiliser unit() pour valider les unités.

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}

• Ainsi, transmettre par erreur quelque chose comme 1rem ou % peut être détecté immédiatement. Il est important de pouvoir faire respecter les règles de conception dans le code.

@warn : Pour les avis de dépréciation et les avertissements

@warn est utilisé pour signaler des conditions indésirables qui ne provoquent pas immédiatement une erreur. Comme le CSS est tout de même généré, cela convient pour une migration progressive.

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}

• Ce mixin émet un avertissement sans casser le code existant. Il est particulièrement efficace lors d'un refactoring dans de grands projets.

Modèle pour émettre des avertissements conditionnels

Cela devient plus pratique lorsqu'il est combiné avec la vérification des plages de valeurs.

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}

• Vous pouvez signaler des erreurs de conception sans interrompre le développement. L'avantage de @warn est que vous pouvez choisir le 'niveau de sévérité'.

@debug : Visualiser le flux des valeurs

@debug est davantage un outil d'observation pour identifier les problèmes plutôt qu'un moyen de gérer les erreurs. Vous pouvez vérifier les résultats de calcul et le contenu des variables.

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;

• Comme les valeurs sont affichées à la compilation, cela aide à vérifier une logique de calcul complexe. Ne le laissez pas dans le code de production ; réservez cette utilisation à l'investigation.

La conception de gardes utilisant @if est la plus importante

En pratique, concevoir pour valider les entrées en amont est le plus important—avant de recourir à @error ou @warn.

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}

• En précisant clairement les 'préconditions correctes' de cette manière, vos mixins et fonctions deviennent explicites.

Gestion des erreurs dans les fonctions (@function)

Vous pouvez gérer les erreurs de la même façon dans les fonctions. C'est particulièrement important dans la logique de calcul.

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}

• Puisque vous pouvez détecter une logique défaillante avant la génération du CSS, la sécurité de votre système de conception s'en trouve renforcée.

Recommandations d'utilisation en pratique

Pour finir, récapitulons les critères de choix entre ces options, en insistant sur les points qui sont souvent difficiles à trancher en pratique.

• Lorsqu'une violation de conception ou un bug est clairement identifié Utilisez @error. Comme générer du CSS dans un état incorrect conduit directement à des bugs, la compilation est arrêtée immédiatement.

• Lorsque vous souhaitez notifier une dépréciation ou donner simplement un avertissement Utilisez @warn. Vous pouvez continuer sans casser le code existant ou en cours de migration, tout en informant sur des problèmes futurs.

• Lorsque vous souhaitez confirmer le flux des valeurs ou les résultats de calcul Utilisez @debug. C'est efficace comme moyen temporaire pour vérifier une logique ou investiguer les causes.

• Lorsque vous souhaitez valider toutes les préconditions, telles que les valeurs d'entrée ou les conditions d'utilisation Utilisez des gardes avec @if. En énonçant explicitement les hypothèses, vous pouvez éviter les problèmes avant qu'ils ne surviennent.

Puisque SASS est un langage où l'on 'peut écrire à peu près n'importe quoi,' une conception qui définit clairement les états indésirables dans le code conduit à des styles plus maintenables et moins sujets aux erreurs à long terme.

Résumé

La gestion des erreurs dans SASS est un mécanisme pour exprimer clairement et appliquer en continu les hypothèses et règles de conception des styles dans le code.

• Les erreurs existent pour que les états invalides ne passent pas inaperçus et puissent être arrêtés immédiatement.
• Les avertissements servent de guide pour effectuer en toute sécurité des changements ou des migrations futures sans tout casser immédiatement.
• Les gardes servent à concevoir de manière à ce que les problèmes ne surviennent pas, plutôt que de les traiter après coup.

En comprenant et en utilisant ces mécanismes de manière appropriée, SASS devient non seulement une extension de CSS mais aussi un langage de conception hautement fiable, capable d'exprimer l'intention et les contraintes.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video