🧑‍💻 VSCode에서 SCSS 설정하기

부트스트랩을 돌아다니다가 Sass라는 것을 발견했다.

저번 프로젝트에서는 CSS만 계속 사용했었는데, 불편한 점이 꽤 있었다. 부트스트랩에서 설정한 변수의 설정값을 바꾸고 싶은데 CSS밖에 모르니 꽤 어려움이 많았다.

그래서 이번에 알게 된 SaSS(SCSS)에 대해 포스팅 해보려 한다.

---

SaSS(SCSS) 란?

• 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.
• CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
  <출처: https://inpa.tistory.com/259 [Inpa Dev 👨‍💻:티스토리]>

---

VS Code에 SaSS 확장 익스텐션 설치하기

저는 Node.js를 사용하지 않습니다.(배운 적이 없어서..)

1. 확장:마켓플레이스를 열고 Live Compiler SaSS를 검색한 뒤 설치

2. Ctrl + Shift + P를 눌러 Preferences: Open User Settings(JSON)을 선택
   
   처음엔 사진처럼 비어있는 파일이다.

"liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
    ],
    "liveServer.settings.donotShowInfoMsg": true

{ } 안에 위 코드를 추가해준다.
(savePath는 본인이 원하는 경로로 바꾸셔도 됩니다~~)

3. scss 폴더를 따로 생성한 후 .scss 파일을 생성한다.
   
   이런식으로 대충 아무거나 써 놓은 다음에

화면 하단의 Watch Sass를 누르면 방금 만든 scss파일이 css파일로 컴파일되어 내가 설정한 저장 경로에 같은 이름을 가진 .css파일이 생성된다.

---

내 프로젝트에 부트스트랩 SaSS 적용하기

부트스트랩 사이트에서 소스파일을 다운로드 받은 후, scss 폴더 전체를 내 프로젝트로 옮긴다.


부트스트랩 scss 폴더와 내가 커스텀할 scss 폴더를 구별해서 만들고, 내가 사용할 scss 폴더에 custom.scss 파일을 생성한다.

@import "부트스트랩 scss폴더 경로/scss/bootstrap";를 작성 후 Ctrl + S로 저장한다.
(찾아보니 scss 폴더 안에 bootstrap.scss파일이 있다. 그걸 import 하는 듯)


그 후, Watch SaSS 하면 custom.css로 파일이 생성된다.
(Watch SaSS는 꼭 SCSS 파일을 저장한 후 누르기!!)

---

SCSS에 익숙해지기만 하면 굉장히 편할 듯 하다.
내일은 SCSS 문법에 대해서 공부해봐야겠다.