Sass의 `darken()` 함수와 같은 변수를 사용하여 CSS 색상 음영을 어떻게 생성할 수 있나요?

CSS 변수를 사용하여 색상 음영 만들기(Sass의 darken() 함수와 유사)

CSS에서는 기본 색상 변수를 정의하는 것이 가능합니다. 호버, 포커스 및 활성 상태에 대한 음영을 자동으로 생성합니다. 방법은 다음과 같습니다.

기본 색상 변수 정의:

:root {
  --color-primary: #f00;
}

상대 색상 구문을 사용하여 기본 색상을 어둡게 하기:

CSS 사양에는 방정식을 사용하여 색상을 조작할 수 있는 "상대 색상 구문"이 도입되었습니다. 기본 색상을 5% 어둡게 하려면:

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

마찬가지로 기본 색상을 10% 어둡게 하려면:

--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);
}

기본 색상을 변수로 정의하면 이제 쉽게 수정할 수 있습니다. 다양한 상태에 대한 음영을 자동으로 생성합니다. 이 접근 방식은 별도의 색상 클래스를 사용하는 것에 비해 색상 변형을 생성하는 더 유지 관리하기 쉽고 효율적인 방법을 제공합니다.

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