Tailwind CSS 源代码中的 withAlpha 实用程序。

在本文中，我们分析了 Tailwind CSS 源代码中的 withAlpha 实用函数。

/**
 * 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)`
}

这个实用函数的美妙之处在于它带有解释代码功能的注释。

// 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}%`
}

首先将 alpha 转换为 Number，withAlpha 接受 alpha 作为字符串并分配给名为 alphaAsNumber 的变量

如果 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%)`
}

上面的代码片段确保 alpha 值是百分比的方法是检查最后一个索引处的项目是否为“%”，否则乘以 *100%。

最后返回颜色混合。

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

但您可能想知道什么是颜色混合。

颜色混合

color-mix() 函数表示法需要两个 ;值并返回将它们在给定色彩空间中按给定量混合的结果。 — MDN 文档。

关于我们：

在 Think Throo，我们的使命是教授开源项目中使用的高级代码库架构概念。

通过在 Next.js/React 中练习高级架构概念，将您的编码技能提高 10 倍，学习最佳实践并构建生产级项目。

我们是开源的 — https://github.com/thinkthroo/thinkthroo （请给我们一颗星！）

我们还提供网络开发和技术写作服务。请通过hello@thinkthroo.com联系我们了解更多信息！

参考文献：

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

以上是Tailwind CSS 源代码中的 withAlpha 实用程序。的详细内容。更多信息请关注PHP中文网其他相关文章！