En utilisant @error de manière responsable dans SASS

Points clés

• La directive @error dans SASS est un outil puissant pour contrôler l'entrée de l'auteur et lancer des erreurs lorsque des problèmes se produisent, ce qui est plus efficace que de permettre des défaillances du compilateur.
• Pour les anciennes versions de SASS qui ne prennent pas en charge @error, vous pouvez utiliser la directive @warn à la place. Pour s'assurer que le compilateur se bloque toujours lorsqu'une erreur se produit, une macro hybride peut être créée qui déclenche une erreur de compilation après un avertissement.
La fonction
• feature-exists('at-error') peut être utilisée pour vérifier si @error est prise en charge. Si ce n'est pas pris en charge, utilisez la directive @warn, puis utilisez une fonction sans l'instruction @return pour écraser le compilateur.
Les fonctions
• log peuvent être utilisées dans d'autres fonctions, et les macros hybrides log peuvent être utilisés ailleurs, lançant ainsi des erreurs de manière responsable. Cela permet une gestion des erreurs efficace pour différentes versions de SASS.

Puisque Ruby Sass 3.4 et Libsass 3.1, la directive @error peut être utilisée. Cette directive est similaire à @warn et est conçue pour terminer le processus d'exécution et afficher un message personnalisé au flux de sortie actuel (probablement la console).

Inutile de dire que cette fonctionnalité est très utile lors de la construction de fonctions et des macros mixtes impliquant une logique SASS pour contrôler les erreurs d'entrée et de lancer de l'auteur lorsque des problèmes surviennent. Vous devez admettre que c'est mieux que de laisser échouer le compilateur, non?

Tout est bon. Sauf que SASS 3.3 est encore largement utilisé. Sass 3.2 est même utilisé à certains endroits. La mise à jour de SASS n'est pas facile, en particulier dans les grands projets. Parfois, il n'est pas possible de passer du temps et du budget pour mettre à jour quelque chose qui fonctionne correctement. Pour ces versions plus anciennes, @error est dénuée de sens et est considérée comme une personnalité at-directive, qui est complètement autorisée dans le SASS pour des raisons de compatibilité directe.

Eh bien, cela signifie-t-il qu'à moins que nous ne décidons de prendre en charge uniquement le dernier moteur SASS, nous ne pouvons pas utiliser @error? Eh bien, vous pouvez imaginer qu'il y a un moyen, donc avec ce post.

Quelle est l'idée?

L'idée est simple: si vous soutenez @error, nous l'utiliserons. Sinon, nous utilisons @warn. Bien que @warn n'empêche pas le compilateur de continuer l'exécution, nous pouvons vouloir déclencher une erreur de compilation après un avertissement afin que le compilateur se bloque complètement. Profitez-en, vous n'avez pas souvent à détruire quelque chose de débridé.

Cela signifie que nous devons envelopper l'intégralité du contenu dans une macro mixte, appelons-le log(...). Nous pouvons l'utiliser comme ceci:

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

Vous devez admettre, c'est cool, n'est-ce pas? Ok, se vantant assez, construisons-le.

Build Logger

donc notre macro hybride fonctionne exactement de la même manière que @error ou @warn parce que c'est juste un wrapper. Par conséquent, cela ne nécessite qu'un seul paramètre: message.

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

Vous pouvez vous demander comment nous allons vérifier le support @error. Au début, j'ai trouvé une solution maladroite impliquant des reniflements de la version, mais c'était horrible. De plus, j'ai complètement ignoré le fait que les concepteurs de base SASS sont des gens intelligents qui ont pris le tout en considération et ont introduit la clé feature-exists(...) de la fonction at-error, en renvoyant si la fonction est prise en charge ou non.

<code>@mixin log($message) { ... }</code>

Si vous êtes un lecteur de description de patch, vous savez probablement que la fonction feature-exists(...) est introduite uniquement dans SASS 3.3. Il ne couvre pas SASS 3.2! Ok, une partie est vraie. Dans SASS 3.2, feature-exists('at-error') est évalué en tant que chaîne Truth . En ajoutant == true, nous nous assurons que SASS 3.2 n'entre pas dans cette condition et ne passe à la version @warn.

Jusqu'à présent, tout s'est bien passé. Bien que nous devons déclencher une erreur de compilation après avertissement. Comment allons-nous faire cela? Il existe de nombreuses façons d'écraser Sass, mais idéalement, nous voulons obtenir quelque chose que vous pouvez reconnaître. Eric Suzanne a eu une idée avant: les fonctions d'appel sans @return sont suffisantes pour s'écraser. Ce mode est souvent appelé NOOP , c'est-à-dire pas de fonctionnement . Fondamentalement, il s'agit d'une fonction vide qui ne fait rien. En raison du fonctionnement de SASS, il plante le compilateur. C'est très bien!

<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
  }
}</code>

Comment allons-nous appeler cette fonction le dernier point? La fonction SASS ne peut être appelée qu'à un emplacement spécifique. Nous avons plusieurs méthodes disponibles:

• une variable fictive, par exemple: $_: noop()
• une propriété virtuelle, par exemple: crash: noop()
• une condition vide, par exemple: @if noop() {}
• Vous pouvez trouver plusieurs autres façons d'appeler cette fonction.

Je veux vous avertir de ne pas utiliser $_ car il s'agit d'une variable commune dans les bibliothèques et les frameworks SASS. Bien que ce ne soit pas un problème dans SASS 3.3, dans SASS 3.2, cela remplacera toutes les variables globales $_, ce qui, dans certains cas, peut entraîner des problèmes difficiles à transformer. Utilisons la condition nul car elle est logique lorsqu'elle est utilisée avec noop . Une condition NOOP pour la fonction NOOP.

<code>@function noop() {}</code>

D'accord! Tessons-le avec le code précédent:

<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
    // 由于函数不能在 Sass 中的任何地方调用，
    // 我们需要在一个虚拟条件中进行调用。
    @if noop() {}
  }
}</code>

Ce qui suit est Libsass:

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

Ce qui suit est Sass 3.4:

<code>message:
path/to/file.scss
1:1  哎呀，你刚才的操作出了问题！
Details:
column: 1
line: 1
file: /path/to/file.scss
status: 1
messageFormatted: path/to/file.scss
1:1  哎呀，你刚才的操作出了问题！</code>

Voici SASS 3.2 et 3.3 (la sortie est une supposition audacieuse car je ne peux pas facilement tester ces versions dans mon terminal):

<code>Error: 哎呀，你刚才的操作出了问题！
在 path/to/file.scss 的第 1 行，位于 `log` 中
使用 --trace 获取回溯。</code>

Cela semble fonctionner! Dans n'importe quel moteur, même l'ancien moteur, le compilateur quittera. Sur les moteurs qui prennent en charge @at-error, ils recevront immédiatement un message d'erreur. Sur ces moteurs non pris en charge, ils reçoivent des messages comme des avertissements, puis écrasent la compilation en raison de la fonction NOOP.

Activez-lui d'enregistrer des journaux à l'intérieur de la fonction

Le seul problème avec notre configuration actuelle est que nous ne pouvons pas lancer une erreur de l'intérieur de la fonction car nous avons construit une macro hybride. Les macros mixtes ne peuvent pas être incluses dans une fonction (car elle peut imprimer le code CSS, ce qui n'a rien à voir avec la fonction SASS)!

Et si nous convertissons d'abord la macro mixte en fonction? À ce stade, quelque chose d'étrange s'est produit: @error n'est pas reconnu comme une fonction valide dans SASS 3.3-, donc il échouera lamentablement: at-directive

Les fonctions ne peuvent contenir que des déclarations variables et des instructions de contrôle.

pour être juste. Cela signifie que nous n'avons plus besoin de hacks NOOP, car les moteurs non pris en charge vont planter sans que nous ayons à les forcer. Bien que nous devons mettre la directive

au-dessus du processus afin que le message soit imprimé sur la console de l'auteur avant de s'écraser. @warn

<code>@include log('哎呀，你刚才的操作出了问题！');</code>

Nous pouvons ensuite fournir une macro hybride pour obtenir une API plus conviviale que les conditions nuls sales et le piratage variable factice.

<code>@mixin log($message) { ... }</code>

Réflexions finales

c'est tout! Nous pouvons maintenant utiliser la fonction

à l'intérieur de la fonction (en raison des limitations) et nous pouvons utiliser la macro hybride log(...) ailleurs pour lancer des erreurs de manière responsable. Très soigné! log(...)

Voici le code complet: (Un exemple de code complet doit être fourni ici, mais je ne peux pas fournir un extrait de code exécutable en raison de l'incapacité d'exécuter le code directement)

Essayez ce gist sur Sassmeister. (Le lien sassmeister doit être fourni ici)

Pour les systèmes de journalisation plus avancés dans SASS, je vous recommande de lire "Build Logger Hybrid Macros". En ce qui concerne la prise en charge des anciennes versions de SASS, je vous recommande de vérifier quand et comment prendre en charge plusieurs versions de SASS.

(La section FAQ sur l'utilisation responsable des erreurs dans SASS doit être incluse ici, mais je l'ai omis en raison des limitations de l'espace.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!