CSS 변수에 단위를 동적으로 할당하려면 어떻게 해야 합니까?

CSS 변수에 대한 동적 단위 할당

CSS에서 변수를 활용하는 기능은 상당한 유연성과 유지 관리성을 제공합니다. 그러나 단위 없는 값을 변수에 할당하면 변수를 다른 목적으로 사용할 때 문제가 발생할 수 있습니다. 이 문서에서는 숫자 값으로 CSS 변수를 설정한 후 사용법에 따라 단위를 동적으로 할당하는 문제를 다룹니다.

다음 예를 고려하세요.

--mywidth: 10;

div {
  width: var(--mywidth) + %;  // should be => width: 10%
}

목표는 -를 사용하는 것입니다. -mywidth 변수는 특정 CSS 속성에 대한 백분율 및 calc() 작업과 같은 다른 속성에 대한 숫자입니다.

해결책은 calc()의 기능을 활용하는 데 있습니다. 변수와 원하는 단위 사이에 간단한 곱셈을 수행하여 필요에 따라 단위를 동적으로 할당할 수 있습니다.

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

이 접근 방식을 사용하면 변수가 숫자 값을 유지하면서 특정 단위를 기준으로 단위를 지정할 수 있습니다.

예를 들어 다음 예를 고려하십시오.

:root {
  --a: 50;
}

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

이 예에서 --a 변수는 .box 클래스 전체에서 사용되며 단위는 다음을 사용하여 동적으로 할당됩니다. 계산().

위 내용은 CSS 변수에 단위를 동적으로 할당하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!