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

먼저 알파가 숫자로 변환되고, 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() 함수 표기법은 두 가지 주어진 색상 공간에서 주어진 양만큼 값을 혼합한 결과를 반환합니다. — 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!