[CSS] CSS 변수

 

📌 변수 정의하기

selector { 
      --변수명: 값;
}

• selector: 변수를 적용할 범위(class or id)
•    - 문서 전체에서 사용할 변수를 설정한다면, :root 나 body 사용
•    - 정의한 변수는 해당 selector 내부에서만 사용 가능 O

.container { 
    --primary-color: #8B008B;
}

 
 
 

📌 변수 사용하기

속성: var(--변수명);

• 태그 선택자(<p>)는 변수를 정의한 selector의 자식 요소여야 한다. **

p { 
    color: var(--primary-color);     
}

 
 
 

📌 변수 대체값(기본값) 사용하기

var(--변수명[, 대체 값]);

• 대체값: 변수가 정의되지 않았을 때 사용되는 기본 값을 지정하는 선택적인 값
  - 변수가 정의되지 않은 경우에도 스타일을 유지할 수 있음

:root {
    --primary-color: #00a0e9;
}

.container {
    color: var(--primary-color, #1a1aff);
    background-color: var(--secondary-color, #3333ff);  
    /* --secondary-color 변수는 정의되어 있지 않음 
       대체 값으로 #3333ff가 사용됨 */
}

 

 

 

📍 변수 저장 & 사용하기

• 변수를 굳이 쓰는 이유: 유지보수에 유용!

 

1. 변수를 저장할 css 파일 생성 (theme.css)

2. theme.css 파일의 :root에 변수 선언 

/* Color styles */
:root {
  --white: #FFFFFF;
  --black: #000000;
  --orange-200: #ED552F;
  --content: #181818;
  --gray-100: #F5F5F5;
  --gray-200: #EBEBEB;
  --gray-300: #E0E0E0;
}

 

 

3. main.css(변수 사용)에 theme.css(변수 선언) 불러오기

@import url(./theme.css);

 

 

4. main.css에서 theme.css의 변수명으로 색상 변수 재할당

:root {
  --primary: var(--orange-200);
  --secondary: var(--orange-100);
}

5. 변수 사용

.header {
  background-color: var(--primary);
}

 

 

 

---

 

출처

 

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

 

CSS 변수 완벽 가이드 – 사용자 지정 CSS 속성 사용하기 - 코딩에브리바디