Utilitaire withAlpha dans le code source CSS Tailwind.

Dans cet article, nous analysons la fonction utilitaire withAlpha dans le code source CSS Tailwind.

/**
 * Apply opacity to a color using `color-mix`.
 */
export function withAlpha(value: string, alpha: string): string {
  if (alpha === null) return value

  // Convert numeric values (like `0.5`) to percentages (like `50%`) so they
  // work properly with `color-mix`. Assume anything that isn't a number is
  // safe to pass through as-is, like `var(--my-opacity)`.
  let alphaAsNumber = Number(alpha)
  if (!Number.isNaN(alphaAsNumber)) {
    alpha = `${alphaAsNumber * 100}%`
  }

  // If the alpha value is a percentage, we can pass it directly to
  // `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
  // make sure it's a percentage.
  else if (alpha[alpha.length - 1] !== '%') {
    alpha = `calc(${alpha} * 100%)`
  }

  return `color-mix(in srgb, ${value} ${alpha}, transparent)`
}

La beauté de cette fonction utilitaire est qu'elle est accompagnée de commentaires expliquant ce que fait le code.

// Convert numeric values (like `0.5`) to percentages (like `50%`) so they
// work properly with `color-mix`. Assume anything that isn't a number is
// safe to pass through as-is, like `var(--my-opacity)`.
let alphaAsNumber = Number(alpha)
if (!Number.isNaN(alphaAsNumber)) {
  alpha = `${alphaAsNumber * 100}%`
}

Tout d'abord, l'alpha est converti en nombre, withAlpha accepte l'alpha comme chaîne et est affecté à une variable nommée alphaAsNumber

si alphaAsNumber n'est pas un nombre, alors celui-ci est converti en % en le multipliant par * 100.

// If the alpha value is a percentage, we can pass it directly to
// `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
// make sure it's a percentage.
else if (alpha[alpha.length - 1] !== '%') {
  alpha = `calc(${alpha} * 100%)`
}

L'extrait de code ci-dessus garantit que la valeur alpha est un pourcentage en vérifiant si l'élément au dernier index est « % », sinon il est multiplié par *100%.

et enfin le mélange de couleurs est renvoyé.

return `color-mix(in srgb, ${value} ${alpha}, transparent)`

mais vous vous demandez peut-être ce qu'est un mélange de couleurs.

mélange de couleurs

La notation fonctionnelle color-mix() prend deux valeurs valeurs et renvoie le résultat de leur mélange dans un espace colorimétrique donné selon une quantité donnée. —Documentation MDN.

À propos de nous :

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Nous fournissons également des services de développement Web et de rédaction technique. Contactez-nous à hello@thinkthroo.com pour en savoir plus !

Références :

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utilities.ts#L108-L123

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L136

3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

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!