withAlpha-Dienstprogramm im Tailwind CSS-Quellcode.

In diesem Artikel analysieren wir die Alpha-Dienstprogrammfunktion im Tailwind-CSS-Quellcode.

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

Das Schöne an dieser Hilfsfunktion ist, dass sie Kommentare enthält, die erklären, was der Code tut.

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

Zuerst wird das Alpha in eine Zahl konvertiert, withAlpha akzeptiert Alpha als Zeichenfolge und wird einer Variablen namens alphaAsNumber zugewiesen

Wenn alphaAsNumber keine Zahl ist, wird diese durch Multiplikation mit * 100 in % umgewandelt.

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

Der obige Codeausschnitt stellt sicher, dass der Alphawert ein Prozentsatz ist, indem überprüft wird, ob das Element beim letzten Index „%“ ist. Andernfalls wird es mit *100 % multipliziert.

und schließlich kommt die Farbmischung zurück.

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

Aber Sie fragen sich vielleicht, was eine Farbmischung ist.

Farbmischung

Die funktionale Notation color-mix() benötigt zwei Werte und gibt das Ergebnis der Mischung dieser Werte in einem bestimmten Farbraum um einen bestimmten Betrag zurück. — MDN-Dokumentation.

Über uns:

Bei Think Throo haben wir die Mission, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Wir bieten auch Webentwicklung und technische Redaktionsdienste an. Kontaktieren Sie uns unter hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

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

Das obige ist der detaillierte Inhalt vonwithAlpha-Dienstprogramm im Tailwind CSS-Quellcode.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!