CSS 변수가 색상 음영 생성을 위해 Sass의 'darken()' 기능을 모방할 수 있습니까?

CSS 변수를 사용한 색상 음영 생성: 체계적인 방법

질문

CSS 변수를 사용하여 Sass의 darken() 함수 기능을 모방할 수 있습니까? 정의된 색상의 음영을 생성합니까?

상대 색상을 사용한 접근 방식 구문

CSS는 다음을 가능하게 하는 "상대 색상 구문"을 도입합니다.

:root {
  --color-primary: #f00;
  --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));
}

작동 방식은 다음과 같습니다.

• --color-primary: 정의 기본 색상.
• --color-primary-darker: 다음을 사용하여 기본 색상을 5% 어둡게 합니다. hsl().
• --color-primary-darkest: hsl()을 사용하여 기본 색상을 10% 어둡게 합니다.

사용

이 변수를 사용하여 스타일 요소:

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

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

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

이 접근 방식을 사용하면 색상을 수정하지 않고도 색상 음영을 동적으로 정의할 수 있습니다. 세 가지 쉐이드로 원하는 그라데이션 효과를 얻을 수 있습니다.

위 내용은 CSS 변수가 색상 음영 생성을 위해 Sass의 'darken()' 기능을 모방할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!