VSCODE sass compile 하기

2018/05/24 - [Programing] - VSCODE 에디터 설치 및 세팅

compile 하기 위한 방법은 여러가지가 있지만,

VSCODE를 이용하여 간편하게 compile 하는 방법이 있으니 그 방법을 추천한다.

시작하기에 앞서 sass를 더 잘 이용할 수 있게 확장프로그램부터 설치하는 것이 좋다.

VSCODE sass 확장프로그램 설치

sass

https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented

Sass Lint

https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint

VSCODE sass compile 하기 위한 확장프로그램 설치

Live Sass Compiler

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

VSCODE sass compile 방법

1. 우선 test로 폴더 및 파일 생성을 한다.

2. 그럼 화면 아래에 Watsh Sass 클릭하면 compile 완료!

(클릭하지 않고, html 파일까지 생성하여 작업하면 저장만 해도 자동으로 압축이 된다.)

3. 아래 화면은 compile이 완료된 모습이다.

VSCODE sass compile 세팅

나는 폴더채로 compile이 되는걸 원치 않고, 내가 현재 열고 있는 파일만 compile만 하고 싶을 때,

또 .map 파일이나 compile 설정을 바꾸고 싶을 때 세팅을 수정하면 된다.

https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

위의 링크 들어가보면 세팅에 대해 나와있다.

그 중에서 우선 .map 파일 및 설정을 바꾸려면 아래와 같이 쓰면 된다.

"liveSassCompile.settings.formats": [
    // This is Default.
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.includeItems": ["css/scss/test.scss"]

위 화면에서 "liveSassCompile.settings.generateMap": false 으로 하면 .map 파일을 생성되지 않는다.

true는 기본적이기 때문에 굳이 안 써도 된다.

또, 내가 한 파일만 compile 하고 싶을땐 "liveSassCompile.settings.includeItems": ["파일경로 및 파일명"] 을 입력하면 되는데,

파일경로를 어떻게 해야할지 몰라 3시간이나 고생했다 ㅠ_ㅠ (성공하고 나서의 이 허무함이란)

파일 경로는 내가 현재 scss 파일을 저장한 상위 폴더 그리고 그 밑 폴더 이렇게 설정해주면 완료!

※ savePath는 "/" : 현재 폴더에 저장 , 상위로 하고 싶으면 "~/../" 이렇게 설정하면된다.

sass compile format 종류

foramt 종류에는 총 4가지가 있는데, 그 종류에 대해 알아보겠다.

nested (// 주석 출력안함, /* */ 주석 출력)

- 중첩 스타일은 Sass의 기본 출력 스타일로, CSS 스타일과 HTML문서의 구조를 잘 보여준다.

각 속성은 한 줄에 작성하고, 각 규칙은 중첩 정도에 따라 들여쓰기를 한다.

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

expanded (// 주석 출력안함, /* */ 주석 출력)

- 확장 스타일은 사람이 작성한 CSS 스타일과 거의 같다고 할 수 있으며,

속성은 규칙 안에서 들여쓰기하여 각 한 줄에 작성하고, 규칙은 들여쓰기 하지 않는다.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

compact (// 주석 출력안함, /* */ 주석 출력하지만 한 줄로 출력)

- 축약 스타일은 중첩 스타일이나 확장 스타일보다 공간을 덜 차지 한다.

각 CSS 규칙을 한 줄에 표시하며 속한 모든 속성도 같은 줄에 작성한다. (여러 줄로 작성한 주석도 한 줄로 표시)

줄마다 선택자가 앞에 있어서 속성보다 선택에 집중할 수 있다.

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

compressed (// 주석 출력안함, /* */ 주석 출력 안 하지만 ! 로 시작할 경우엔 출력)

- 압축 스타일은 최소한의 공간을 차지하도록 압축한 형태로, 사람이 읽는 상황을 고려하지 않는다.

선택자를 구분하는 공백처럼 꼭 필요한 공백이나, 파일 끝에 하나의 새 줄 밖의 공백은 모두 삭제한다.

(여러 줄 주석도 삭제하지만 주석의 첫 글자로 느낌표(!)를 써넣으면 삭제하지 않고 출력물에 표시함)

또 다른 소소한 압축도 실행하는데, 색상 값을 최소 표현으로 변경한다.

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

압축 종류에 대한 설명 참조 : https://designmeme.github.io/ko/blog/sass-comments/