dengan utilitiAlpha dalam kod sumber CSS Tailwind.

Dalam artikel ini, kami menganalisis dengan fungsi utiliti Alpha dalam kod sumber 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)`
}

Keindahan tentang fungsi utiliti ini ialah ia disertakan dengan ulasan yang menerangkan perkara yang dilakukan oleh kod tersebut.

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

Mula-mula alfa ditukar kepada Nombor, denganAlpha menerima alfa sebagai rentetan dan ditugaskan kepada pembolehubah bernama alphaAsNumber

jika alphaAsNumber bukan nombor, maka ini ditukar kepada % dengan mendarabkannya dengan * 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%)`
}

Cara coretan kod di atas ini memastikan bahawa nilai alfa ialah peratusan adalah dengan menyemak sama ada item pada indeks terakhir ialah '%', jika tidak, ia didarab dengan *100%.

dan akhirnya campuran warna dikembalikan.

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

tetapi anda mungkin tertanya-tanya apakah itu campuran warna.

campuran warna

Notasi fungsi color-mix() mengambil dua nilai dan mengembalikan hasil mencampurkannya dalam ruang warna tertentu dengan jumlah tertentu. — dokumentasi MDN.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar konsep seni bina asas kod lanjutan yang digunakan dalam projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Kami juga menyediakan perkhidmatan pembangunan web dan penulisan teknikal. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

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🎜>

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

Atas ialah kandungan terperinci dengan utilitiAlpha dalam kod sumber CSS Tailwind.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!