CSS 변수와 프런트엔드 일치

반응형

저는 웹사이트를 만들 때 CSS 파일에 전역 변수를 설정하는 경우가 많습니다.

예를들면

/* style.css */
:root {
      /* Colors */
      --color-black: #222;
      --color-red: #e12;
      --color-white: #fff;

      /* Fonts */
      --font-family-roboto: 'Roboto', sans-serif;
      --font-family-opensans: 'Open Sans', sans-serif;
}

:root에 변수를 설정하면 프런트엔드 프로젝트에서 언제 어디서나 이러한 값을 사용할 수 있습니다.

예를들면

 

.wrapper {
      font-family: var(--font-family-roboto);
      color: var(--color-black);
}

a {
      font-family: var(--font-family-opensans);
      color: var(--color-red);
}

따라서 웹 사이트 테마의 일관성이 향상되고 무엇보다도 코딩이 훨씬 쉬워집니다.