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/tailwinss/sc>

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

以上是Tailwind CSS 原始碼中的 withAlpha 實用程式。的詳細內容。更多資訊請關注PHP中文網其他相關文章！