VScode Scss 적용 방법

VScode에서 Scss 설정하기

이번에는 VScode에서 Scss를 설정하는 방법에 대해 알아보겠습니다.
우선 Scss 간단한 설명을 하자면 SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합입니다.
장점으로는, 가독성과 재사용이을 높여주어 유지 보수를 쉽개 해주며 CSS보다 심플한 표기법으로 CSS를 구조화하여 표현이 가능합니다.

---

설치 방법. 첫 번째

1. VScode 실행 후 Extensions를 클릭해줍니다.
2. 검색 란에 Sass 검색 후 들어가줍니다.
3. Sass 페이지에 들어간 후 install을 클릭하여 설치해줍니다.

설치 방법. 두 번째

1. VScode에 좌측 하단에 있는 톱니바퀴를 클릭해줍니다.
2. 톱니바퀴를 클릭후 Settings 클릭해줍니다.
3. Settings 클릭하게되면 우측에 검색 란이 나오는데 해당 검색 란에 Live Sass Compiler 검색해줍니다.
4. 검색해서 나온 탭에서 Formats구간을 찾은 후 Edit in settings.json 클릭해줍니다.

설치 방법. 세 번째

1. 밑 해당 사진 네모 구간대로 설정해줍니다.

    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
      
      {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css/"
      },
      {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
      }
    ]

설치 방법. 네 번째

1. 밑 해당 사진에 Watch Sass를 클릭 후 작성해주시면 됩니다.

Scss 설정 구간 단어의 의미

1. format
scss파일을 css파일로 변환하도록 해주는 설정이며, nested, expanded, compact, compressed총 네 가지가 있다.

2. extensionName
extensionName은 뒤에 확장자를.css나 .min.css로 설정할 수 있다.

3. savePath
savePath는 현재 폴더는 어느 경로로 컴파일링할 지 정해준다.