CSS 변수 var() 사용하기

** IE 지원 하지않는다.

1. 변수 선언하기 :

  css안에 :root {}를 작성하고 변수를 선언한다.

  변수이름은 --로 시작한다.

<h1>Large Headline Text</h1>
<h3>Medium Headline Text</h3>
<p>
	lorem50
</p>

<button class="btn primary">primary</button>
<button class="btn secondary">secondary</button>
<button class="btn positive">positive</button>
<button class="btn negative">negative</button>

/* style.css */

:root {
	/* 변수 선언 */
	--primary: royalblue;
	--secondary: black;
	--positive: yellowgreen;
	--negative: crimson;

	--big: 50px;
	--medium: 30px;
	--small: 14px;
}

 

2. var()로 변수 사용하기 

.btn {
	border: none;
	outline: none;
	padding: 7px 20px;
	border-radius: 5px;
	color: #fff;
}
.btn.primary {
	background-color: var(--primary);
}
.btn.secondary {
	background-color: var(--secondary);
}
.btn.positive {
	background-color: var(--positive);
}
.btn.negative {
	background-color: var(--negative);
}

h1 {
	font-size: var(--big);
}
h3 {
	font-size: var(--medium);
}
p {
	font-size: var(--small);
}