Valider l'entrée dans les mixins et fonctions SASS

Points de base

• La vérification des entrées dans le mixin SASS et les fonctions est essentielle, garantissant que le code entrant est du type de données et du format corrects, aidant à prévenir les erreurs et les bogues, et à rendre le code plus facile à déboguer et à maintenir.
• SASS fournit certaines fonctions intégrées pour la validation des entrées, telles que type-of(), unit() et unitless(). Ces fonctions peuvent être utilisées pour vérifier le type et l'unité des données d'entrée, et une erreur sera lancée si l'entrée ne répond pas aux critères attendus.
• Les fonctions de validation personnalisées peuvent être créées dans SASS pour des vérifications de validation plus complexes. Cela implique de définir une nouvelle fonction à l'aide de la directive @function et de renvoyer une valeur basée sur la vérification de vérification à l'aide de la directive @return.
• Si la vérification d'entrée dans le mixin SASS ou la fonction échoue, une erreur est lancée et la compilation du code SASS est arrêtée. La directive @error peut être utilisée pour lancer un message d'erreur personnalisé, fournissant des informations détaillées sur la nature de l'erreur et comment corriger l'erreur.

Lors de l'écriture de SASS et de l'utilisation par d'autres, ils sont susceptibles de faire une erreur lors de l'utilisation de votre code. En fait, honnêtement, lorsque j'écris Sass et que je l'utilise quelques jours (ou même quelques heures plus tard), je fais des erreurs dans mon propre code. Vous pourriez aussi. Heureusement, SASS a de nombreuses fonctions qui peuvent nous aider à vérifier les développeurs d'entrée dans SASS que nous avons écrits.

Ces technologies sont particulièrement utiles pour les équipes qui partagent Sass Mixin ou maintiennent un kit de démarrage ou un ensemble de mixin et de fonctions. Les développeurs ont deux options lors de l'utilisation de bibliothèques SASS partagées: ils peuvent s'interrompre par e-mail, chat, ping ou autrement pour obtenir de l'aide avec une aide de mixin personnalisée, ou utiliser une documentation détaillée qui inclut la vérification du code pour les aider mutuellement. (Pour ce point, ce n'est pas seulement un problème avec SASS: tout code partagé doit communiquer via des interruptions ou des documents.) Prenons maintenant certaines des méthodes les plus utiles de vérification SASS.

Vérifiez une seule valeur

mixin et fonction prennent des paramètres. Si vous passez le code à d'autres développeurs au travail ou publiez des bibliothèques open source, vous devez vous assurer que les paramètres correspondent à votre intention. Ces fonctions sont utiles pour vérifier les variables dans les paramètres.

Assurez-vous que la variable existe: variable-exists()

Si votre fonction ou votre mixin dépend d'une variable définie par le développeur, utilisez la fonction variable-exists() appropriée pour vous assurer que la variable existe. Cette fonction renvoie True ou Faux selon que la variable a été créée et définie.

<code class="language-sass">@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}</code>

Cependant, une meilleure option que de compter sur les développeurs pour définir correctement les variables globales est d'inclure ces variables par défaut dans votre bibliothèque:

<code class="language-sass">// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}</code>

Type de valeur de vérification: type-of()

Si vous avez besoin de connaître le type de valeur représenté par une variable, veuillez utiliser type-of(). Cette fonction renverra l'une des chaînes suivantes:

• String
• couleur
• numéro
• bool
• null
• Liste
• map

Ceci est utile pour vérifier certains types d'entrées. Vous pouvez vous assurer que le développeur ne passe que les valeurs au mixin qui crée la taille:

<code class="language-sass">@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}</code>

Vous pouvez également utiliser type-of() pour vous assurer que le mélange de couleurs ne traite que les couleurs:

<code class="language-sass">// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}</code>

Si vous avez besoin de développeurs pour créer des cartes de paramètres de configuration pour les thèmes, vous pouvez vous assurer qu'ils ont des cartes valides:

<code class="language-sass">@mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "确保 `$height` 是一个数字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "确保 `$width` 是一个数字。";
  }
}</code>

Unités pour confirmer les nombres: unit()

Parfois, les opérations mathématiques dans les fonctions ou le mixine nécessitent des unités spécifiques dans leurs paramètres. Vous pouvez utiliser unit() pour confirmer que la valeur a la bonne unité. Par exemple, vous pouvez utiliser un mixin pour créer des dimensions de pixels et d'unité REM. ( Notez que vous feriez mieux d'exécuter le package avec une tâche pour cela, mais si vous avez besoin de le garder en sass, continuez à lire. )

<code class="language-sass">@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "确保你将有效的颜色传递给 color-fade() 函数。";
  }
}</code>

Vérifiez la liste et la carte

Nous avons vu comment utiliser type-of() pour nous assurer que les variables contiennent des listes ou des cartes. Nous pouvons également tester deux choses importantes: si les valeurs sont dans la liste et si les clés sont dans la carte.

Trouver des valeurs dans la liste: index()

La fonction

index() vous dira si la valeur est trouvée dans la liste. Techniquement, il renverra la position de la valeur dans la liste (un nombre) ou NULL. Ce n'est pas une véritable fonction booléenne, mais pour notre objectif ici, les valeurs vraies et fausses sont suffisantes.

index() La fonction prend deux paramètres: la liste et la valeur que vous souhaitez trouver dans la liste. Cette fonction est utile pour tester les mesures de certaines valeurs dans un mélange. Si nous avons un mélange qui produit des calculs de rembourrage ou de marge en utilisant le raccourci supérieur, à droite, en bas ou à gauche, nous voulons nous assurer que nous n'essayons pas de calculer des valeurs comme initial, héritage ou auto.

<code class="language-sass">@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此处输出
  } @else {
    @warn "确保 `$settings` 是一个 Sass 映射。";
  }
}</code>

Assurez-vous que la carte a des clés: map-has-key()

Si vous vérifiez une clé spécifique dans la carte, vous pouvez utiliser la fonction map-has-key() pour vous assurer que la clé existe sur la carte que vous vérifiez. Cela sera très utile si vous utilisez $breakpoints cartographie et mélange de requête multimédia:

<code class="language-sass">$rem-size: 16px !default;

@mixin px-rem($property, $value) {
  @if unit($value) == 'px' {
    #{$property}: $value;
    #{$property}: $value / $rem-size * 1rem;
  } @elseif unit($value) == 'rem' {
    #{$property}: $value * $rem-size / 1rem;
    #{$property}: $value;
  } @else {
    @warn "确保 `$value` 以 px 或 rem 为单位。";
  }
}</code>

Vérifiez le mixin et les fonctions

Parfois, vous rédigerez un mixin ou une fonction qui dépend d'un mixin ou d'une fonction existant ou d'une autre bibliothèque SASS. Mettons à jour le mixin bp() de l'exemple précédent pour s'appuyer sur la bibliothèque Sass Sass. Nous pouvons l'étendre comme ceci:

<code class="language-sass">$rem-size: 16px !default;

@mixin margin-rem($values...) {
  $output: ();
  @each $value in $values {
    @if index(auto inherit initial 0, $value) {
      $output: append($output, $value);
    } @else {
      $output: append($output, $value / $rem-size * 1rem);
    }
  }
  margin: #{$output};
}</code>

Maintenant, notre mixin bp() (plus court et utilise des valeurs mappées) utilisera breakpoint() mixin quand il existe. Sinon, il retombera à notre propre code de mixin de requête multimédia.

Il existe une fonction correspondante appelée function-exists(). Vous pouvez l'utiliser pour tester si une fonction spécifique existe. Si vous avez des opérations mathématiques qui reposent sur des fonctions non standard, vous pouvez vous assurer d'inclure des bibliothèques contenant la fonction. Compass a ajouté une fonction pow() pour les mathématiques exponentielles. Si vous créez un rapport de taille de police qui nécessite la fonction, testez-le:

<code class="language-sass">@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}</code>

Questions de rapport: @warn et @error

Comme vous l'avez peut-être remarqué dans l'exemple de code ci-dessus, j'ai prêté attention à fournir de bons commentaires aux développeurs lorsque notre validation capture une entrée incorrecte. La plupart du temps, j'ai utilisé

. Cette directive envoie des messages à la console du développeur, mais permet au compilateur de terminer l'exécution. @warn

Parfois, lorsque j'ai besoin d'arrêter complètement le compilateur (aucune entrée ou fonction spécifique, beaucoup de sortie sera cassée), j'utilise

pour envoyer le message à la console et arrêter le compilateur. @error

Pour plus d'informations sur la différence entre

et @warn, vous pouvez consulter mon article précédent sur ce sujet ou la section correspondante dans la référence SASS pour SitePoint. @error

Conclusion

Personne n'est parfait - ceux qui utilisent notre code ne sont pas, et pas même nous-mêmes après avoir écrit notre code pendant quelques heures! C'est pourquoi il est très important d'aider nous-mêmes et les autres en validant les entrées dans le mixin et les fonctions. Ces techniques vous aident non seulement à utiliser votre propre code plus efficacement, mais aussi pour que les équipes partagent et entretiennent plus facilement les bibliothèques SASS.

Comment empêchez-vous les erreurs de SASS? Veuillez nous faire savoir dans les commentaires!

FAQS (FAQ) sur la vérification des entrées dans Sass Mixin and Functions

Quel est le but de vérifier l'entrée dans le mixin SASS et les fonctions?

La vérification de l'entrée dans le mixin SASS et les fonctions est essentielle pour maintenir l'intégrité et la fonctionnalité du code. Il permet de s'assurer que les types de données transmis pour le mixin et la fonction sont corrects et sont conformes au format attendu. Cela empêche les erreurs et les bogues dans le code, le rendant plus puissant et plus fiable. Il rend également votre code plus facile à déboguer et à maintenir, car vous pouvez rapidement identifier et corriger tous les problèmes dans les données d'entrée.

Comment vérifier l'entrée dans le mixin et la fonction SASS?

SASS fournit des fonctions intégrées que vous pouvez utiliser pour vérifier les entrées dans le mixin et les fonctions. Il s'agit notamment de

, type-of() et unit(), etc. Vous pouvez utiliser ces fonctions pour vérifier le type et l'unité des données d'entrée, et une erreur sera lancée si l'entrée ne répond pas aux critères attendus. Par exemple, vous pouvez utiliser la fonction unitless() pour vérifier si l'entrée est un nombre, et sinon, une erreur sera lancée. type-of()

Puis-je créer une fonction de validation personnalisée dans SASS?

Oui, vous pouvez créer des fonctions de validation personnalisées dans SASS. Ceci est très utile si vous avez besoin d'effectuer des vérifications de validation plus complexes qui ne peuvent pas être implémentées à l'aide de fonctions intégrées. Pour créer une fonction de validation personnalisée, définissez simplement une nouvelle fonction à l'aide de la directive @function, puis utilisez la directive @return pour renvoyer une valeur basée sur la vérification de validation.

Que se passe-t-il si la validation d'entrée échoue dans le mixin SASS ou la fonction?

Si la validation d'entrée dans le mixin SASS ou la fonction échoue, une erreur sera lancée et la compilation du code SASS s'arrêtera. Cela peut vous aider à identifier et à corriger rapidement tous les problèmes dans les données d'entrée et à empêcher les bogues et les erreurs dans la sortie CSS finale.

Comment gérer les erreurs dans le mixin SASS et les fonctions?

SASS fournit la directive @error, que vous pouvez utiliser pour lancer un message d'erreur personnalisé lorsque la vérification des entrées échoue. Ceci est particulièrement utile pour le débogage, car vous pouvez fournir des informations détaillées sur la nature de l'erreur et comment le réparer.

Puis-je utiliser la fonction d'introspection SASS pour la validation d'entrée?

Oui, la fonction d'introspection SASS peut être utilisée pour la validation d'entrée. Ces fonctions vous permettent de vérifier le type, l'unité et d'autres propriétés des données d'entrée et peuvent être utilisées conjointement avec la directive @error, qui peut lancer un message d'erreur personnalisé lorsque l'entrée ne répond pas aux critères attendus.

Quels sont les cas d'utilisation courants pour valider l'entrée dans le mixin SASS et les fonctions?

Vérifiez que l'entrée peut être utilisée dans une variété de scénarios dans le mixin SASS et les fonctions. Par exemple, vous voudrez peut-être vous assurer que la valeur de couleur transmise au mélange est une couleur valide, ou que le nombre passé à la fonction a la bonne unité. La validation d'entrée peut également être utilisée pour appliquer certaines contraintes ou règles dans le code, comme s'assurer qu'un certain paramètre est toujours fourni, ou qu'une valeur se situe dans une plage spécifique.

Puis-je tester si le mixin existe dans le SASS?

Oui, vous pouvez utiliser la fonction mixin-exists() pour tester si le mixin existe dans SASS. Si Mixin existe, cette fonction renvoie vrai, sinon faux. Ceci est très utile pour prévenir les erreurs dans votre code, car vous pouvez vérifier si le mixin existe avant d'essayer de l'inclure.

Comment utiliser la fonction unit() pour la validation d'entrée dans SASS?

La fonction

dans unit() dans SASS renvoie l'unité d'un nombre. Vous pouvez utiliser cette fonction dans la validation d'entrée pour vérifier si le numéro a la bonne unité. Par exemple, vous pouvez vous assurer que la valeur de longueur transmise au mixin est en pixels, ou que la valeur temporelle transmise à la fonction est en quelques secondes.

Quelles sont les meilleures pratiques pour valider l'entrée dans le mixin SASS et les fonctions?

Les meilleures pratiques pour valider les entrées dans SASS Mixin incluent: toujours la vérification des données d'entrée; Message d'erreur; et testez soigneusement votre code pour vous assurer que la vérification de vérification fonctionne correctement. @error

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!