CSS / 변수 사용하기
CSS 변수
CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다.
변수 선언
|
1 |
--variable-name: value; |
변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.
변수 사용
|
1 |
property: var( --variable-name ) |
예제
- 변수 --my-color-1을 red로 설정하고 사용합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root { --my-color-1: red; } .x { color: var( --my-color-1 ); } </style> </head> <body> <h1 class="x">Lorem Ipsum Dolor</h1> </body> </html> |
- 정의하지 않은 변수를 사용하면, 그 속성을 사용하지 않은 것과 같은 효과를 냅니다.
|
1 2 3 4 5 6 7 8 |
<style> :root { --my-color-1: red; } .x { color: var( --my-color-2 ); } </style> |
- 변수가 정의되지 않았을 때 사용할 값을 정할 수 있습니다.
- --my-color-2가 정의되지 않았으므로 orange가 사용됩니다.
|
1 2 3 4 5 6 7 8 |
<style> :root { --my-color-1: red; } .x { color: var( --my-color-2, orange ); } </style> |
- 특정 선택자에 변수를 선언하면 그 선택자가 적용되는 요소와 그 하위 요소에서 변수를 사용할 수 있습니다.
- .x에 정의된 --my-color-1은 .y에서는 사용할 수 없습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .x { --my-color-1: red; } .x span { color: var( --my-color-1 ); } .y { color: var( --my-color-1 ); } </style> </head> <body> <h1 class="x"><span>Lorem Ipsum Dolor</span></h1> <h1 class="y">Lorem Ipsum Dolor</h1> </body> </html> |
브라우저 지원
CSS의 변수 사용은 유용한 기능이지만, 지원하지 않는 브라우저들이 있습니다. 특시 IE는 11도 지원하지 않습니다.
https://caniuse.com