SCSS에서 변수 사용하기

사 스 조 아

SCSS는 훌륭한 CSS 전처리기입니다. 기존의 CSS에서 지원하지 않는 변수 기능이나 함수, mixin등 여러 기능을 지원합니다. SCSS(SASS)에 대해서는 따로 다루도록 하겠습니다.

 

SCSS에서는 변수 기능을 사용할 수 있습니다. 문법은 다음과 같습니다.

 

$variable-name: variable-value;

variable-name에 변수 이름, value에는 값을 넣어주시면 변수 기능을 사용할 수 있습니다.

 

변수기능은 어떨때 사용하면 유용할까요? 그냥 css 쓰면 안될까요?

---

예제

$HeadFontColor: #292929;
$nickNameFontColor:  #393939;

$fontColor: #444444;
$timeFontColor: #737373;
$keyColor: #c62917;

$postViewColor: #a6a6a6; //게시판 들어갔을 때, 게시물 내용 회색 작은글씨

$rightMenuColor: #3744a5;

$comment_activeColor: #0ca5af;

실제 프로젝트에서 scss파일에 위와 같이 주로 쓰이는 디자인 컬러들을 설정해놨습니다. 

 .item_active{
      display: block;
      background-color: $keyColor;
      color:white;}

  이렇게 위와 같이 $keyColor 만으로 색깔을 불러올 수 있습니다. 일일히 #c62917 안쳐도 됩니다.

좋은 디자인을 가진 사이트라면, 디자인에 쓰인 색깔이 거의 정해져있기 때문에 scss 변수 기능을 사용하면 코드 작성 시간을 줄이고, (IDE 없이도) 좀 더 명확하게 색깔을 나타낼 수 있다는 장점이 있습니다. 색깔뿐만 아니라 block의 모습이라던지, 버튼이라던지에 모두 적용할 수 있습니다. 

 

추가로, 저는 프로젝트 scss 변수명에 camelCase를 사용하였지만 공식문서에는 snake_case를 사용했네요.. 코드 컨벤션 정하실 때 참고하시길 바랍니다.

 

또, SCSS는 변수명의 하이픈(-)과 언더바(_)를 구분하지 않습니다. 즉, key_color로 선언했어도 key-color로도 불러올 수 있습니다.

 

참고자료

https://sass-lang.com/documentation/variables