====== Sass settings in VS Code ======
<WRAP left notice 70%>
  * description : Sass @extend and Inheritance
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-20
</WRAP>
<WRAP clear></WRAP>
\\
1. VS Code에서 extensions > Live Sass Complier를 설치합니다.\\
\\
{{:wiki:sass:live-sass-compiler.png? 500|}}\\
\\
설치를 하면 VS Code 하단의 패널에 "Watch Sass" 아이콘을 볼 수 있습니다.\\
\\
{{:wiki:sass:watch-sass.png|}}\\
\\
2. VS Code에서,\\
(1) Ctrl + Shift+ p > Preferences: Open Settings (JSON)을 클릭합니다.\\
\\
(2) "settings.json"파일에서 하기의 코드를 입력합니다.\\
<code css>
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist"
    }
  ]
</code> 
(3) %%scss%%파일을 작성한 후,
  - 하단 패널의 %%Watch Sass%% 버튼을 클릭하면, %%Watching...%%으로 버튼이 변하면서 %%css%%로 컴파일합니다.
  - "settings.json"에서 설정한 것처럼 %%dist%%라는 폴더를 생성하여 저장합니다.
  - 이후, live server를 통해 브라우저 창에서 해당 %%html%% 파일에 %%css%%가 실시간으로 적용되는 것을 확인할 수 있습니다.


====Ref====
[[https://www.youtube.com/watch?v=aydFCQiUW44|How I setup VS Code for a beginner front-end workflow by Jessica Chen, Coder Coder]]\\
\\
Live Server와 Live Sass Compiler를 만든 이의 github\\
[[https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md|ritwickdey/vscode-live-sass-compiler]]\\

{{tag>오션, Sass @extend and Inheritance}}