Sass(Scss)

Sass(Scss)

css 전처리기 입니다. (css 가 동작하기 전에 사용하는 기능, css 확장)
웹에서는 css 만 동작하기 때문에, 전처리기로 작성한 언어를 css 로 컴파일 하여 동작시킵니다.
그러기 때문에 Sass 사용시에는 컴파일러가 필요합니다.

설치

npm install sass -g

컴파일러

여러가지 컴파일러가 있지만, 쉽게 다가갈 수 있는 vscode 에 extensions 로 제공하는 Live Sass Compiler 를 추천합니다.
설치 후, scss 코드 추가 후 Watch Sass 를 클릭하면 css 로 컴파일 해줍니다.
Watching 이 돌아가고 있으면 저장시 자동 컴파일을 해줍니다.

설정

Live Sass Compiler 사용시 설정해야할 부분이 있습니다.
map 파일을 사용할지 말지, css 파일 expaneded 를 쓸지 compact 을 쓸지 설정해줘야합니다.
설정 안할시 기본적으로 map 파일을 생성, expanded 를 사용합니다.

1. Settings => Live Sass Compiler => Generate Map => settings.json => "liveSassCompile.settings.generateMap": false 를 추가.

2. liveSassCompile.settings.formats => "format": "compact" 추가.