단위가 없는 CSS 변수에 단위를 어떻게 적용할 수 있나요?

원하는 단위로 단위 없는 CSS 변수 사용자 정의

CSS에서 단위 없는 변수를 정의하는 기능은 스타일 지정의 유연성을 높여줍니다. 그러나 너비의 백분율, calc() 연산의 픽셀 등 다양한 단위를 사용하여 변수를 여러 장소에서 사용해야 하는 상황이 발생하는 것이 일반적입니다.

calc() 및 단위 곱셈 소개

이 문제를 해결하려면 calc() 함수를 사용하여 원하는 단위를 변수에 명시적으로 추가할 수 있습니다. 변수에 적절한 단위 계수(예: 1%)를 곱하면 원하는 동작을 달성할 수 있습니다.

예:

CSS가 변수 --mywidth는 10으로 설정됩니다. 이를 너비에 대한 백분율로 사용하려면 간단히 쓰기:

div {
  width: calc(var(--mywidth) * 1%);
}

이 계산은 --mywidth에 1%(0.01)를 효과적으로 곱하여 너비 값이 10%가 됩니다.

확장 사용 사례:

백분율 외에도 이 기술을 사용하여 원하는 값을 추가할 수 있습니다. 단위:

• 픽셀의 경우: calc(var(--mywidth) * 1px)
• 도의 경우: calc(var(--mywidth) * 1deg)
• 불투명도의 경우: calc(var(--mywidth) * 0.1)

데모:

다음 스니펫은 이 기술의 적용을 보여줍니다.

:root {
  --a: 50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);
  padding:20px;
  box-sizing:border-box;
}

이 예에서 상자 요소는 너비의 백분율, 테두리의 픽셀, 선형 그래디언트 각도의 도 및 픽셀을 포함하여 다양한 단위로 --a를 사용하는 방법을 보여줍니다. 패딩용.

위 내용은 단위가 없는 CSS 변수에 단위를 어떻게 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!