유연성 있게 단위 없는 CSS 변수를 사용하는 방법

단위 없는 CSS 변수는 스타일시트 전체에서 편리하게 사용할 수 있는 숫자 값을 저장하는 기능을 제공합니다. . 그러나 백분율이나 픽셀과 같은 다양한 단위가 필요한 다양한 컨텍스트에서 동일한 변수를 사용하려는 시나리오가 발생할 수 있습니다.

이 딜레마의 예는 CSS 변수를 값 10으로 설정하지만 어떤 경우에는 백분율로 사용해야 하고 다른 경우에는 계산을 위해 일반 숫자로 사용해야 합니다.

해결책은 calc() 함수를 활용하는 것입니다. calc() 함수 내에서 원하는 단위로 변수를 간단히 곱함으로써 필요한 유연성을 얻을 수 있습니다.

예를 들어 값이 10인 변수 --mywidth를 백분율로 변환하려면 , 간단히 다음을 사용하세요:

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

이렇게 하면 너비 속성이 정확히 의도한 대로 10%로 설정됩니다. .

이 접근 방식의 다양성은 다양한 단위로 확장되므로 동일한 스타일시트 내에서 필요한 백분율, 픽셀 또는 기타 측정 단위 간에 원활하게 전환할 수 있습니다.

이를 설명하려면 다음을 고려하세요. 다음 코드 조각:

: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 변수는 너비, 테두리, 배경 및 패딩을 포함한 다양한 속성을 정의하는 데 사용됩니다. calc() 함수 내의 단위를 활용하면 --a.