CSS 변수만 사용하여 Sass의 `darken()` 기능과 같은 CSS 색상 음영을 어떻게 만들 수 있나요?

CSS 변수로 색상 음영 만들기: Sass의 Darken() 함수 시뮬레이션

문제 설명:

동적 색상 음영 만들기 Sass의 darken()과 유사한 방식으로 CSS 변수를 사용하여 호버, 포커스 및 활성 상태에 대해 function.

해결책:

CSS 색상 모듈 레벨 4 사양에는 산술 연산을 사용하여 색상을 조작할 수 있는 "상대 색상 구문"이 도입되었습니다. 이를 통해 다음과 같은 색상 음영을 생성할 수 있습니다.

:root {
  --color-primary: #f00; /* any format you want here */
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

이 코드에서는

• var(--color-primary)가 원래 색상입니다.
• --color-primary-darker는 다음보다 5% 더 어둡습니다. --color-primary.
• --color-primary-darkest는 --color-primary보다 10% 더 어둡습니다.

calc() 표현식에서 백분율을 조정하여, 기본 색상의 다양한 음영을 생성할 수 있습니다. 이 접근 방식은 Sass의 darken() 함수와 유사한 기능을 제공하지만 순전히 CSS 구문을 사용합니다.

위 내용은 CSS 변수만 사용하여 Sass의 `darken()` 기능과 같은 CSS 색상 음영을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!