[VScode] SCSS 사용하는 법

in Dev. Log on Tips, SCSS
[VScode] SCSS 사용하는 법

CSS 전처리기 - MDN

웹페이지를 꾸미기 위해 CSS를 작성하다 보면 코드가 너무 길어진다. 그럴 땐 내가 작성하고도
뭐가 뭔지 알아보지도 못하겠고 이 많은 선택자 중첩을 해야 할 때 자식 선택자들이 많다면
이 선택자들을 언제 다 써야 할지 힘들 때가 있다.

그럴 땐 CSS 전처리기를 사용해 보자!
전처리기 중에서도 여러 가지가 있지만 그중에서도 SCSS를 사용하는 방법을 알아보고자 한다.

VSCode 의 Extension 다운로드와 사용방법

npm으로 설치하는 방법도 있지만, VSCode를 쓰는 사람이라면 더 쉬운 방법이 있다.
바로 확장 프로그램을 하나 설치하면 된다.

  • 일단 vscode를 실행해서 extension으로 들어가자.
  • sass를 검색하면 ‘Live Sass Compiler’ 가 나오는데 이것을 설치하자.

vscodescss1VSCODE의 Extension ‘Live Sass Compiler’

  • 설치 후 vscode의 하단을 보면 이처럼 Watch sass 라는 것이 생겼을 것이다.

vscodescss2VSCODE의 하단에 보이는 Watch sass

  • 이것을 클릭하면 이제부터는 scss를 watching 중이다. 이것을 클릭하지 않고는 컴파일이 되지 않으니 꼭 Watching 중인지 확인하고 컴파일 하자!

vscodescss3Sass와 Scss 파일을 Watching중이다.

  • 이제 작업하던 CSS 파일 혹은 새로 CSS 파일을 만들고 이제부터 확장자를 SCSS로 바꾸자!

  • 스타일링을 위한 코드 작성을 하고 ‘저장’하면 자동적으로 Sass compiler는 Watching 중이었던 CSS를 SCSS로 컴파일 해 준다.

vscodescss3컴파일이 완료 되었다면? Success! 확인하자

  • 너무 쉽다! 기본적으로는 컴파일된 CSS 파일은 SCSS 파일이 위치한 디렉토리에 생성되지만, 내가 원하는 곳에 생성되게 임의로 설정할 수도 있다.

설정방법

  1. vscode의 파일(file) -> 기본설정(Preferences) -> 설정(Setting)
  2. Live Sass 검색
  3. Setting.json에서 편집
 "liveSassCompile.settings.includeItems": [
    "/scss/ *.scss" // 어떤 경로에 있는 .scss파일만 컴파일할 것인지 설정
  ],
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css" // 컴파일된 css 파일이 저장될 경로
    }
  ],

이처럼 나오는데 전체 scss 파일이 컴파일 되면 안 되니까 어떤 폴더 안에 들어있는 scss만 컴파일할 것인지,
컴파일이 되면 어떤 폴더에 저장되게 할 것인지 설정할 수 있다.

위의 설정에서 liveSassCompile.settings.includeItems는 상위폴더가 항상 scss일때만 컴파일을 하라는 뜻이고,
savePath는 지금 scss가 들어있는 폴더 상위 폴더의 scss 폴더에 저장하라는 뜻이다.

© 2022.02 by sunnyfterrain