Sass[SCSS] 시작하기 (확장 설치, 초기 세팅)

Sass

안녕하세요. 오늘은 Sass를 설치하고 세팅해보도록 하겠습니다.

우선 대부분의 퍼블리셔 분들이 vscode 로 작업을 하시기에 vscode 기준으로 작성하겠습니다.

 

vscode 확장설치

확장 검색에서 sass를 검색하면 Live Sass Compiler 라는 확장이 나옵니다. (위에 취소선 그어져 있는거 말고 아래꺼 설치하시면 됩니다.)

설치 후에 설정에 들어가셔서 우측 상단에 아이콘 버튼을 눌러 setting.json 을 열어줍니다.

 

 

설정에 들어가서

우측 상단에 setting.json 열기

 

그 후에 해당 코드를 넣어줍니다.

 

 

setting.json에 추가하는 코드

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

 

"liveSassCompile.settings.formats" 에서 "format" 값은 css로 컴파일이 될때 어떤 형식으로 컴파일이 될지 설정해주는거고,

(format의 종류는 expanded(기본값), compact, compressed, nested 가 있고 원하는 형식으로 지정해주면 됩니다.)

 

"savePath" 는 컴파일된 css 파일이 어디에 저장될지 설정해주는 코드입니다.

 

"liveSassCompile.settings.generateMap" 값은 css 파일이 컴파일되어 생성될때 map 파일도 같이 생성되는지 여부인데 전 css 파일만 생성되기를 원하기에 false로 해줬습니다.

 

그밖에 liveSassCompile 관련 다른 설정들도 있는데 우선 지금은 생략하도록 하겠습니다. :)

 

이제 scss 파일을 생성해주고 저장 후에 좌측 하단에 Watch Sass 버튼을 누르면  (Live Sass Compiler 확장을 설치하면 생깁니다.)

 

 

scss 파일 작성

 

Watch Sass 클릭

 

컴파일 상태

 

css 파일 컴파일 완료

 

저희가 설정해둔 경로 "/css" 에 style.css 파일이 컴파일되어 생성된 것을 확인할 수 있습니다.