CSS var() 함수 변수의 자바스크립트 동적 생성

var() 함수는 변수를 사용하여 스타일시트 전체에 값을 저장하고 재사용할 수 있게 해주는 CSS의 기능입니다. SCSS 같은 전처리 도구들에서 사용하는 변수를 활용한 공통 값을 관리 할 수 있습니다. 폰트 사이즈나 대표 컬러등 공통으로 많이 사용되는 부분에 적용하면 유지관리에 많은 도움이 됩니다.

 

var()로 정의된 변수는 color, background-color, font-size, margin 등과 같은 다양한 CSS 속성에 사용할 수 있습니다. 또한 다른 값이나 계산과 결합, 자바스크립트를 통한 동적 스타일등으로 다양하게 활용 할 수 있어 스크립트로 일일이 바꿔 줘야 했던 값들을 var() 함수의 변수로 설정하면 단 한번의 설정으로 여러 곳의 값을 변경하는게 가능합니다.

 

CSS 변수는 대소문자를 구분하며 자식 요소에 의해 상속될 수 있습니다.

 

1. 기본 :root 사용법

CSS에서 var() 함수를 사용하는 방법은 다음과 같습니다.

 

변수를 정의합니다.

:root {
  --primary-color: blue;
}

:root 선택자는 루트 수준에서 변수를 선언하는 데 사용되어 문서 전체에서 액세스할 수 있습니다.

--primary-color라는 변수를 정의하고 값 blue를 할당합니다.

 

스타일에서 var() 함수의 인수로 변수를 사용합니다.

.my-element {
  color: var(--primary-color);
}

.my-element 클래스의 color 속성에 --primary-color 변수를 var()함수의 인수로 사용합니다.

 

변수 업데이트:

:root {
  --primary-color: red;
}

루트 수준에서 변수 값을 수정하면 문서 전체에서 스타일을 쉽게 업데이트할 수 있습니다.

--primary-color 값을 blue에서 red로 변경하면 --primary-color 변수를 사용하는 모든 요소에 이 변경 사항이 반영됩니다.

 

2. 특정 선택자 범위 내 사용하기

권장 방법은 :root 수준에서 CSS 변수를 정의하는 것이지만 특정 선택자 내에서 변수를 정의하고 사용할 수 있습니다. 이를 통해 변수의 범위를 스타일시트의 특정 요소나 섹션으로 제한하게 됩니다. 

 

선택자 내에서 변수를 정의합니다.

.my-element {
  --primary-color: blue;
}

.my-element 선택자 내에서 --primary-color라는 변수를 정의합니다. 변수는 이 선택자와 해당 선택자 하위 항목 내에서만 액세스할 수 있습니다.

 

동일한 선택자 또는 그 자손 내에서 변수를 사용합니다.

.my-element {
  color: var(--primary-color);
}

.my-element span {
  background-color: var(--primary-color);
}

.my-element 선택자와 그 하위 span 요소 내에서 --primary-color 변수를 사용합니다.

var() 함수는 동일한 선택자 내에서 변수 값을 검색합니다. 특정 선택자 내에서 변수를 정의하면 스타일시트의 다른 부분에 있는 같은 이름의 변수와의 충돌을 피할 수 있습니다.

선택자 내에서 정의한 변수는 :root 수준 또는 상위 선택자에서 정의한 동일한 이름의 변수보다 우선하여 적용됩니다.

 

3. 자바스크립트로 동적 변수 설정하기

JavaScript를 사용하여 var() 함수에서 사용되는 CSS 변수를 설정하려면 DOM 요소의 style 속성을 사용해야 합니다.

 

JavaScript로 CSS 변수 설정

const element = document.querySelector('.my-element');
element.style.setProperty('--primary-color', 'blue');

document.querySelector()를 사용하여 .my-element 클래스를 DOM 요소로 선택합니다. setProperty() 메서드에서 CSS 변수 --primary-color의 값을 'blue'로 설정합니다.

 

JavaScript로 CSS 변수 값 변경

const element = document.querySelector('.my-element');
element.style.setProperty('--primary-color', 'red');

설정한 값을 다시 변경할 때도 setProperty() 메서드를 사용합니다. --primary-color CSS 변수 값을 'red'로 업데이트합니다.

자바스크립트로 var() 함수에 사용될 변수를 지정하면 여러곳에 사용될 값을 한번의 설정으로 가능하기 때문에 여러줄의 스크립트를 작성할 필요가 없어 코드 관리에 효과적입니다.

 

4. CSS :root에 동적 변수 설정

앞에서는 선택자 DOM을 사용하여 설정하는 예를 만들었다면 이번에는 :root에서 적용될 동적 변수를 설정하겠습니다.

document.documentElement.style.setProperty() 메서드를 사용하여 DOM을 대신합니다. 문서의 루트 요소(:root)에서 CSS 속성을 추가하거나 수정할 수 있습니다.

 

root에서 사용될 변수를 설정합니다.

// Create and set a CSS variable dynamically
document.documentElement.style.setProperty('--custom-color', 'green');

document.documentElement를 사용하여 문서의 루트 요소에 액세스합니다.(CSS의 :root와 동일). setProperty() 메서드를 사용하여 --custom-color라는 새 CSS 변수를 만들고 'green' 값을 할당합니다.

JavaScript 코드가 실행되면 값이 'green'인 --custom-color를 CSS 스타일의 var() 함수의 인수로 사용할 수 있습니다.

 

동적으로 생성된 CSS 변수 적용

.my-element {
  color: var(--custom-color);
}

 

JavaScript를 사용하여 설정을 할 경우 반드시 문서가 로드될 때 같이 로드 되는 스크립트 코드인지 확인 후 적용해야 합니다. 

 

var() 함수의 변수를 통한 CSS관리는 전체 공통 스타일을 유지하는데 큰 도움을 주지만, Javascript의 효율적인 관리에도 큰 도움이 됩니다. 공통의 스타일을 스크립트로 관리해야 하는 상황이라면 효율적인 스크립트관리에 도움이 됩니다.