SCSS를 vscode 에디터에서 사용하기(플러그인 설치와 작업영역 설정하기)

VSCODE 에디터에서 SCSS를 사용하는 방법을 알아본다.

vscode 에디터에서 sass 확장 컴파일러 설치하기

1. 확장(extensions)에서 sass를 검색한다.
2. sass와 Live sass compiler와 sass Lint를 설치해준다.
   (live server은 Live sass compiler를 설치하면 자동으로 설치된다.)

 sass : sass 관련된 문법을 vscode에서 지원하도록 해준다.
- Live sass compiler : 설치시 에디터 하단에 watching sass가 생기는데
이를 켜두면 a.scss -> a.css 이런식으로 변환이 가능하다.

vscode 설정 (사용자, 작업영역)

사용자 설정 : 내 vscode editor에 대한 기본 설정이며 주로 폰트, 탭간격, 줄바꿈 여부 등을 설정한다.
한 번 설정시 전역으로 설정됩니다
작업영역 설정 : 이 프로젝트에 대한 개별 설정 부분이다.

위 부분이 이해가 안간다면 ? vscode 에디터 단축키, 사용자 설정하기

SASS 작업영역 설정하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        // You can add more .min.css
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap":true,
    "liveSassCompile.settings.autoprefix": [
       "> 1%",
       "last 2 versions"
   ]
}

1. Live sass compiler에서 제공하는
   link : https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
   에서 들어가게되면 Example 부분에 SASS 컴파일러를 환경설정할수 있는 JSON이 보인다.
2. 이걸 vscode 환경설정 작업영역에 복붙한다.
3. Watching sass를 다시 껐다 키면 “savePath”: “/css” 라고 저장을 해놨기 때문에
   루트 폴더 바로 아래 css 폴더가 생성되고 그 안에 .css 파일이 생성되게된다
4. 이제 sass/test.scss에서 저장했던 sass 파일이 css/test.css에 알아서 변환이 되어 저장된다.

작업할 때마다 Watching SASS를 킨 상태로 vscode의 작업 영역을 분할해서
왼쪽은 test.scss 오른쪽은 test.css 이런식으로 비교하면
실시간으로 scss -> css 변환과정을 볼 수 있다.

Watching..이라고 나오면 제대로 변환되고 있는 것이다.
문제가 발생하면 저렇게 오류 구문을 띄워준다.