DeveloperOC
CSS 변수
CSS를 사용할 때 자주쓰는 값들이 존재한다.
이 블로그 같은 경우 Jekyll Theme를 사용해서 미리 정해진 변수들도 존재 했지만 추가한 변수도 있다.
Scroll-Bar, Font-Color, Background-color, margin, padding 등
여러번 사용하고, 동일한 값을 사용하는 css값의 경우 변수를 선언하여 사용하는 것이 유지보수가 용이하다.
:root{
--my-var: 10px;
}
.my-div{
padding: var(--my-var);
}
CSS 변수 사용법은 변수 앞에 -- 문자를 붙여 사용하면 된다.
#id 또는 .class, :root에 저장하여 사용하는데 :root의 경우만 사용 가능한 범위가 다르다.
:root{
--my-root-var: 10px;
}
#my-id{
--my-id-var: 12px;
--root-var: var(--my-root-var);
padding: var(--my-root-var);
// :root에서 선언한 변수를 다른 선택자 변수에 사용 가능
}
.my-class{
--my-class-var: 15px;
// --id-var: var(--my-id-var);
// padding: var(--my-id-var);
// 해당 선택자가 #my-id 선택자의 자식이 되면 변수 사용 가능
}
:root에서 저장한 값은 어디서나 사용이 가능하다.
var(“사용 변수 이름”)의 형태로 값을 대입해주기만 하면 된다.
#id 또는 .class에 선언한 변수는 본인 또는 자식 선택자에서만 사용이 가능하다.
<div id="my-id">
<div class="my-class">
</div>
</div>
위와 같이 사용된 경우 #my-id 에서 선언한 변수는 .my-class에서 사용 가능하다.