[CSS] CSS 변수(--variable) 사용법

1. 변수 선언 방법

:root는 문서 전체 의미
한 element 내에서만 변수를 사용하고 싶다면, 해당 selector를 사용하면 됩니다.
:root 의사 클래스에 선언해서 HTML 문서 어디에서나 사용자 지정 변수에 접근할 수 있도록 구성하는 패턴을 많이 사용

--variable name 형식입니다.

/* 변수를 선언하는 방법 */
:root{
        --color-white : #ffffff;
        --font-regular: 16px;
        --size-border-radius: 4px;
}

 

2. 변수 사용 방법

var() 형식으로 변수 사용할 수 있습니다.

section {
        color: var(--color-white)
        font-size: var(--font-regular);
        border : 1px solid black;
        border-radius: var(--size-border-radius);
}

 

---

⭐ CSS 변수의 유효 범위와 상속

변수는 말 그대로 전역 변수와 지역변수가 있는데, 이러한 개념이 CSS에서도 동일하다.
그리고 지역변수의 경우 선택자에 따라 변수를 상속해서 사용할 수 있는 특징을 가지고 있다.

---

사용예시

1번 기본 사용법에서 설명한 것처럼 :root에 지정한 것은 보통 전역 변수라 생각하고
HTML 문서 어디에서든 사용이 가능하지만,
예제처럼 특정 선택자 안에 선언된 변수는 지역변수라 생각하면 된다.  
four의 경우 --test가 선언이 되어있지 않지만 사용 가능한 이유는. two의 자식 요소 이기 때문이며.
two에 선언된 --test 변수를 상속받아 사용이 가능하다. (물론. three처럼 재 정의해서 사용해도 상관없다.)

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

.two {
  --test: 10px;
  font-size: var(--test); /* 10px */
}

.three {
  --test: 2em;
  font-size: var(--test); /* 2em */
}

.four {
  font-size: var(--test); /* 10px (상속) */
}

---

⭐ CSS 변수 대안 값

CSS 변수가 정의되지 않았을 때, var()를 이용하여 여러 개의 대체 변수를 정의할 수 있다.

.two {
  color: var(--my-var, red); 
  /* --my-var가 정의되지 않았을 경우 red로 표시됨 */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); 
  /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
}

.three {
  background-color: var(--my-var, --my-background, pink); 
  /* 유효하지 않음: "--my-background, pink" */
}

---

⭐ 유효하지 않은 CSS 변수 처리

만일 브라우저가 유효하지 않은 var() 구문을 만나게 되면, 그 속성의 초기값이나 상속된 값이 사용된다.

<p>This paragraph is initial black.</p>

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
/* color에 컬러값이 아닌 16px의 값은 유효하지 않다. 그러니 초기 디폴트 값인 블랙색상으로 적용된다. */

- color에 16px이라는 속성은 유효한 값이 아니며, 이럴 경우 브라우저는 두 단계로 처리하게 된다.
1) color 속성이 상속되었는지를 확인한다.

     그런데 <p>가 color 속성과 연관된 부모 엘리먼트가 없다. 그렇다면 다음 단계로 넘어간다.

2) 값을 default initial value, (초기 설정 디폴트 값) 즉, black 으로 처리한다.

 

---

⭐ JavaScript에서의 CSS 변수 접근

setProperty(), getPropertyValue(), item(), removeProperty() 메서드 사용

- setProperty() : style 값 설정하기
- getPropertyValue() : style 값 가져오기
- item() : style값 가져오기, 인자로 index를 사용
- removeProperty() : style 값 삭제하기

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");

// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);

// 설정(set) 
document.body.style.setProperty('color', 'lime'); 
document.body.style.setProperty('font-size', '16px'); // - 를 사용한것에 주목! 

// 읽기(get) 
document.body.style.getPropertyValue('color'); // 'lime' 

// item() 이용, 인자값은 인덱스 숫자 
document.body.style.item(0) // 'color' 
document.body.style.item(1) // 'font-size' 

// 제거(remove), 제거 후에는 빈 문자열을 반환한다. 
document.body.style.removeProperty('color') // 'lime' 
document.body.style.item(1) // ''

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties