단위 없는 CSS 변수: 단위 변환 처리

CSS 변수로 작업할 때 프레젠테이션에 대한 유연성과 제어를 유지하기 위해 단위 없는 값을 사용하는 것이 바람직한 경우가 많습니다. 그러나 CSS 속성은 다양한 상황에서 특정 단위를 기대합니다. 이 가이드에서는 단위 없는 변수를 사용하고 이를 필요한 단위로 원활하게 변환하는 기술을 보여줍니다.

시나리오:

변수 --mywidth를 수치. 그러나 CSS 내에서는 이 변수를 요소 너비의 백분율과 calc() 작업의 일반 숫자로 활용하려고 합니다.

해결책:

calc() 및 단위 곱셈:

이를 달성하려면 calc() 함수를 사용하고 원하는 단위로 간단한 곱셈을 수행하십시오. 예:

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

이 접근 방식은 너비 속성의 요구 사항을 준수하여 단위 없는 변수 --mywidth를 백분율 값으로 다시 조정합니다. 마찬가지로 변수를 계산용 숫자로 사용하려면 그에 따라 승수를 조정하십시오.

calc(var(--mywidth) * 1px)

예:

다음 코드를 고려하세요.

: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 변수는 단위 없이 시작됩니다. .box 클래스 내에서 calc()를 사용하여 필요에 따라 백분율, 픽셀 및 각도로 변환합니다. 결과는 지정된 크기, 테두리 너비, 그라데이션 각도 및 패딩이 포함된 상자입니다.

이 기술을 사용하면 단위 없는 값으로 CSS 변수를 정의한 후 적절한 단위로 변환할 수 있어 유연성과 효율성이 향상됩니다. CSS 스타일에 추가하세요.