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

最初にアルファが Number に変換され、withAlpha はアルファを文字列として受け入れ、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%)`
}

上記のコード スニペットがアルファ値がパーセンテージであることを確認する方法は、最後のインデックスの項目が '%' であるかどうかをチェックすることによって行われ、それ以外の場合は *100% を乗算します。

そして最後にカラーミックスが返されます。

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

しかし、カラーミックスとは何なのか疑問に思っているかもしれません。

カラーミックス

color-mix() 関数表記は 2 つの を使用します。値を取得し、それらを指定された色空間で指定された量だけ混合した結果を返します。 — MDN ドキュメント。

私たちについて:

Think Throo では、オープンソース プロジェクトで使用される高度なコードベース アーキテクチャの概念を教えることを使命としています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、実稼働レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

Web 開発およびテクニカル ライティング サービスも提供しています。詳細については、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 中国語 Web サイトの他の関連記事を参照してください。