ice rabbit programming

이전 글에서 CSS에서 변수 사용하는 것을 다룬 적이 있다. 글에서 사용한 방법은 다른 CSS 파일에서 변수를 가져다가 사용할 수 있게 된다. 오늘 포스팅에서는 자바 스크립트 파일에서 사용하는 것에 대해서 소개하고, 타입 스크립트일 경우에는 모듈을 포함하는 걸 추가로 작성하려고 한다. 과정을 요약하면 CSS에서 변수를 export하고, JS/TS 파일에서 import하여 사용하는 간단한 과정이다. CSS에서 변수 선언 및 export하기 첫 번째로는 CSS에서 변수를 정의한 후에, export를 해주어야 한다. 다음과 같이 사용하면 된다. $theme-colors: ( 'someColor': #000, 'anotherColor': #FFF, ); :root { @each $key, $value in $t..

CSS, SCSS를 사용할 때 color 값 지정은 굉장히 많이 발생한다. 자주 쓰이는 색깔들은 표준적으로 정해져 있기도 하지만, 투명도를 조절하거나 정해져 있지 않는 경우에는 아래와 같이 hex값(#ffffff 등)이나 RGBA(rgba(255,255,255,0.5) 등)를 사용하여 지정한다. .element { color: #ffffff; } 예시로 든 것은 그냥 흰색이지만, 만약 키워드가 없는 색상을 굉장히 많이 지정해야 한다면? 프로그래밍을 맨 처음 배울 때의 변수의 필요성과 같이, 반복 및 유지보수 용이성을 위해서는 색상을 키워드로 하는 것이 좋을 것이다. vuetify와 같은 UI 프레임워크를 사용한다면, 이전에 vuetify에서 색상 지정하는 글에서 썼던 것처럼 color를 지정하고, cla..