[SCSS]Sass 컴파일러 깔기, 기초 작용법

오늘은 SCSS를 다루는 법을 맛보기처럼 배워봤다.

 

CSS를 좀더 편하게 작성하게 하는 SCSS를 사용하기 위해, 맨 먼저 VSC에 확장 프로그램으로 Live Sass Compiler을 깔아야 한다. 'Glenn Marks'가 배포하는 파일로 설치할 수 있다. 보라색 눈 모양이 있는 프로그램을 설치하면 된다. 다만 여기서 끝이 아니다. 보다 편리하게 쓰기 위해서는 설정을 조금 더 만져줘야 한다. 어차피 확장 프로그램은 한번 설치해서 죽 쓰게 될 것이니 처음부터 설정을 잘 해두는 게 중요하겠다.

 

SCSS는 .scss 파일이지만, 이 파일은 HTML에서는 읽히지 않는다. 따라서 .scss 파일로 작성한 뒤에 반드시 .css 파일로 컴퓨터가 처리할 수 있게 바꿔주는 작업(컴파일 Compile)이 필요하다. 바로 이 과정에서 파일을 변환시켜주는 '컴파일러'가 필요한 것이다. Live Sass Compiler는 여러 컴파일러 중 하나라고 할 수 있다!

그럼 지금부터 간단하게 다루는 방법 및 SCSS 기초를 알아보자.

 

 

1. 왼쪽 아래 톱니에서 설정->설정창을 키고, Live Sass Compiler을 클릭한다.

2. 이 중 Formats에서 'settings.json에서 편집'을 클릭해서 편집창을 띄운다. (여기서 잠깐! json JavaScript Object Notation이란? 파이썬, java, js, C언어 등등 수많은 프로그래밍 언어들이 가져다 쓸 수 있는 통일언어를 말한다. 인터넷에서 자료를 전송하고 받을 때 많이 쓴다고.)

3. 이 편집창에서 설정을 만지게 되는데, 쓰는 사람마다 조금씩 다르겠지만 나는 배운대로 "savePath"(어디로 파일을 저장하게 될지)를 : "~/../css"로 해주었다. 그러면 내가 지정해둔 css폴더로 컴파일 결과물이 저장된다. 여기서 팁! json에서 "~"는 현재 폴더를 지칭한다고 한다.

 

4. 나중에 min.scss파일을 쓸 수 있으니(이 파일은 min이 붙지 않은 파일보다 용량이 작다. 실제 프로젝트에서는 빠르게 실행하기 위해 종종 쓴다고)컴파일링 할 때 min.css와 .css가 함께 생기게 해보자. 아래와 같은 부분이 있으면,

{      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css",
      "savePathReplacementPairs": null
    }

"expanded"가 본래 디폴트 값으로, 사람이 읽기 좋게 들여쓴 탓에 용량이 더 큰 .css로 저장되는 방식이다. 이것을 복사해서 위 코드 아래에 통째로 다시 붙여넣고, 남겨둔 곳의 format는 "compressed"로 바꾸고 extensionName는 ".min.css"로 바꿔준다. 이러면 min.css파일이 .css파일과 함께 생성되게 된다. 저장을 한번만 해도 두 파일이 다 생겨난다!

 

 

5. 마지막으로, 파일을 저장할 때 지저분하게 자꾸 Map파일이 같이 생기는 것을 방지하기 위해 최종적으로, '"liveSassCompile.settings.generateMap" : false'를 추가하며 아래와 같이 입력해주었다.

{
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../css"
    }
  ],
"liveSassCompile.settings.generateMap" : false
}

여기서 잠깐! 이렇게 한다고 해서 바로 컴파일 되는 것은 아니다. vs code 창 우측 아래를 보면, 눈 모양과 Watch Sass가 보일 것이다. 이것을 한번 더 클릭하면 Watching...이라고 바뀌는데, Watching 상태에서 저장할 때에만 컴파일이 되니 이걸 반드시 유의할 것. 자주 까먹게 된다...... 휴. 

 

+ 팁: 컴파일 시 코드에 문제가 있으면 x표시와 함께 저 부분이 빨간 Error라고 바뀌고, 컴파일이 제대로 되지 않는다. 뒤이어 아래 나오는 출력창을 보면 뭘 수정해야 할지 대략적으로 알 수 있다. 성공적으로 컴파일하면 Success가 초록색으로 뜬다. 의외로 유용하다.

 

---

SCSS(SASS였는데 좀더 진화? 업그레이드? 된 거라고 한다)는 CSS를 보다 편리하게 쓸 수 있게 도와준다.

가령, CSS에서 아래와 같이 작성해야 하는 코드라고 해보자.

header {
width: 100%; background- color: #FFF; display: flex; justify-center: center;
}

header .container {
width: 1600px; height: 80px; display: flex; align-items: center; 
}

header .container .list {
height: 80px; display: flex; align-items: stretch;
}

 

위 코드는 헤더와 헤더 아래쪽에 속한 class 값을 container로 준 div, 그리고 그 아래 속한 class 값을 list로 준 항목의 css에 대해 설명하고 있다. 본래대로라면 위처럼 작성되어야 하는 것을 SCSS에서는 훨씬 편하게 쓸 수 있다.

header {
width: 100%; background- color: #FFF; display: flex; justify-center: center;
	.container {width: 1600px; height: 80px; display: flex; align-items: center; 
		.list {
        height: 80px; display: flex; align-items: stretch;
       	 }
	}
}

똑같은 코드인데, 훨씬 알아보기 쉽고 깔끔해지는 것을 알 수 있다!!! 여러 번 반복되는 부분을 쓸 필요 없어지니 시간이 축약된다. 물론 scss로 한번에 쓰기까지는 바로 튀어나올 수 있을 만큼 css 구조를 잘 다룰 수 있어야 하는 것 같다. 아직 그정도는 안 되어서... css로 만든 코드를 꾸역꾸역 scss에 밀어 넣어서 정리하고 수정하고 테스트 해보고 있다. 

 

하여튼 SCSS에서 위처럼 차곡차곡 정리할 때에는 .container:after이나 .container:hover 같이 뒤에 따라붙는 건 반드시 앞에 &를 붙여줘야 자기자신으로 읽어주는 거라고 한다. &.container.after 같이...

앞에 &를 안 쓰면 아랫단계로 내려가 버려서... ...

또 css에서 기존에 쓰던 > 같은 거는 그대로 쓸 수 있는 듯 하다.

 

$도 쓸 수 있다는게 장점이라고 하는데... $main-color: red(아무 색상이나. rgb도 가능); 를 scss파일 맨 위에 넣어두며는 다른 부분 작성하다가도 $main-color(이름은 마음대로 지을 수 있음! 앞에 $가 중요하다. 글자 크기 같은 것도 이름을 붙여서 가능.)로 바로 적용이 가능하다. 즉, 해당 프로젝트에서 메인으로 쓰는 색상코드나 폰트 크기를 일일이 매번 뒤적뒤적 찾지 않아도 된다는 장점이 있다. 

또 더 좋은 장점으로는 사칙연산이 적용된다는 점이라고. *는 곱하기, /는 나누기, +와 -는 그대로 쓰는 듯하다. 30px*2; 이런 식으로 60px으로 나오게 할 수 있다.

 

• 중간에 bem 네이밍, bem 방법론(Blcok, Element, Modifier) 에 대해서도 간략하게 언급만 했는데, 나중에 필요하면 더 알아봐도 된다고 했다. --와 __를 적용해서 클래스 네임을 짓는 거라고 했던가...? 하여튼 그걸로 쓰는 회사도 있다고... 다만 그렇게 쓰다보면 class명이나 id명에 너무 길어져버려서 선생님은 선호하지 않으신다고 한다. 
• 이 외에 오늘 배운 거는 swiper js(무료로 제공해주는 라이브러리인데, js로도 만들 수야 있지만 아무도 안 그런다고 한다... 엄청 만들기 어려워보임!)를 자바 스크립트를 통해 연결하는 법. 화면 칸에서 비져나간 부분은 overflow:hidden;으로 바꿔 당장 눈에 안 보이도록 예쁘게 없애는 법. z=index: ;를 쓰는 법(숫자가 높으면 중첩된 요소를 위로 올린다. 보통은 겹칠 때 아래 있는 놈이 위에 있는 놈을 잡아먹는다.) 
• 이것저것 분석하거나 갖다 쓸 때, API를 자주 들여다볼 것. 보는 눈을 익혀야 한다.