CSS 변수를 다른 단위와 함께 동적으로 사용할 수 있습니까?

동적 단위가 있는 단위 없는 CSS 변수

백분율 기반 값과 단위 없는 값을 모두 사용할 때 CSS 변수를 조작하는 데 어려움이 있을 수 있습니다. 이 질문은 단위 없는 CSS 변수를 할당한 다음 이를 다양한 단위와 상호 교환적으로 사용하는 방법을 탐구합니다.

질문:

CSS 변수를 숫자로 설정한 다음 어떤 경우에는 백분율로 사용되고 다른 경우에는 일반 숫자로 사용됩니까? 예:

--mywidth:10;

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

답변:

예, calc() 함수를 사용하여 이를 달성할 수 있습니다. 변수에 적절한 단위를 곱하면 원하는 단위로 동적으로 변환할 수 있습니다.

변수 --mywidth를 백분율로 사용하려면 1%를 곱하면 됩니다.

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

예:

다음 코드는 calc() 함수를 사용하여 동적으로 단위를 추가하는 방법을 보여줍니다. 단위 없는 CSS 변수:

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

<div class="box"></div>

위 내용은 CSS 변수를 다른 단위와 함께 동적으로 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!