CSS에도 변수 설정이 가능하다?

html, css 수업이 한창 진행되고 있다. 웹퍼블리셔 과정을 들으면서 대부분 배웠던 것들이라 수업 따라가는게 힘들지는 않다. 수업을 들으면서 ‘아 그렇게 했었지’ 하면서 기억을 회복하고 있다.

기존에 알았던 것 이외에, 이번에 들으면서 새로웠던 것들, 유용한 것들 위주로 포스팅 하려고 한다.

CSS 변수 설정

프로그래밍 언어가 아님에도 변수 설정이 가능했다.

:root{} 사이에 입력해주면 된다.

자주 사용하는 컬러, 수치 등은 변수로 설정해두어 사용하면 편리할 듯 하다. 팀 단위로 일할 때도 유용하게 쓸 수 있겠다. 개인으로 쓸 일이 많지 않을 수 있겠지만, 의도적으로 수치, 컬러 정형화하고 변수 사용하는 습관 들이면 좋겠다.

/* CSS Variable */
:root {
  --white: #fff;
  --black: #181818;
  --yellow-opacity: hsla(60, 50%, 50%, 0.85);
  --blue: #6aaee6;
  --primary-color: var(--dark-brown);
  --accent-twitter: var(--blue);
  --spacing-xs: 0.5rem; /* 8px */
  --text-xs: 0.75rem; /* 12px */
  --container-width: 64rem; /* 1024px */
}