Sass 설치하기(1) - VS Code Extension 사용

Sass를 사용하는 방법은 두가지가 있는데 첫번째는 vs code 설치 -> Live Sass Compiler 확장프로그램을 설치하는 방법이고 두번째는 vs code 터미널에서 명령어를 입력해 사용하는 방법이다. 두가지를 전부 해보겠다.

 

** 이 글은 이미 CSS와 VS Code에 익숙해지신 분들을 위한 글입니다. + 저를 위한 글

 

1. 환경설정(Setting)

1) VS Code 설치 (기본 Extension 설치는 https://liz52hz0322.tistory.com/43를 참고) 

2) VS Code에서 Extensions -> Live Sass Compiler를 설치한다.

 

Live Sass Compiler

이제 보여드리겠음 얘가 을매나 편한 놈인지

 

 

2. 사용방법

1) index.html 파일과 style 폴더를 생성한 뒤 main.scss 파일을 만들어준다.

(sass compiler는 scss 문법도 css로 변환이 가능하며, scss 문법을 sass 문법보다 사용하는 사람이 훨씬 많기 때문에 scss 구문을 사용하여 공부하기로 했다. https://liz52hz0322.tistory.com/45)

2) main.scss를 작성한 뒤 VS Code 하단의 Watch Sass 를 눌러줄 것.

 

하단에 있는 빨간 동그라미

3) Watch Sass를 클릭하면 영문 그대로 scss 파일이 css 파일로 빌드된다.

좌측을 보면 아까 없었던 main.css와 main.css.map이라는 파일이 요롷게 생긴다. 빌드 성공!!!!

 

4) main.scss 파일에서 수정하면 main.css에 그대로 반영된다.

open live server로 확인하면 그대로 잘 반영된다.  (Alt + L + Alt + O)

정말 아름다운 사스,,

 

Watch Sass 버튼을 클릭해서 컴파일 하는 동안은 .scss 파일에서 코드를 수정하면 실시간으로 .css 파일에 적용된다. 이 기능을 멈추고 싶으면 다시 한 번 Watch Sass 버튼을 누르면 된다. 다시 실행시키려면 다시 누르면 된다.

 

3. 주의할 점

• index.html에 링크할 때 .css파일로 링크해야 된다. .scss 파일로 링크하면 브라우저가 해석을 못한다.
• 작성과 수정은 .scss 파일에서 한다. .css 파일은 건드리지 않는 것이 좋다.

---

참고

 

40 minutes Basic Sass (박나연 저)

 

https://youtu.be/qdah3ve0m7Q