CSS 전처리기 - Sass.
Sass를 도입하면 코드를 작성하는 양이 줄어들어 개발 속도가 높아집니다. 또, 무엇보다 함수나 파일 분할 기능을 사용할 수 있으므로 보수·갱신성이 현격히 오릅니다.

특히 VisualStudioCode라면 Extentions로 간단하게 환경 구축 할 수 버리므로, 도입하지 않은 사람은 손해일지도 모릅니다,,,

목차
1. Step1 Extensions에서 Live Sass Compiler 추가
2. Step2 scss 파일 만들기
3. Step3 Watch Sass를 클릭
4. 옵션(css 압축)
5. Sass의 사용 예

Step1 Extensions에서 Live Sass Compiler 추가

VisualStudioCode의 Extensions에서 Live Sass Compiler를 검색하고 Install 버튼으로 추가하세요.

Step2 scss 파일 만들기

css를 출력할 폴더에 .scss 파일을 만듭니다.

Step3 Watch Sass 클릭

상태바에 표시되는 Watch Sass를 클릭하면 Watching... 상태가 됩니다.
.css 파일과 .css.map 파일이 생성되면 성공합니다!

박힌 scss가 실시간으로 css로 컴파일되는 환경이 되었습니다 👍

옵션

기본적으로 충분하기 때문에 너무 괴롭힐 필요는 없지만 css를 압축하고 컴파일 할 수도 있습니다.
나는 VisualStudioCode의 setting.json에 다음을 추가하고 출력하는 CSS를 압축합니다.

"liveSassCompile.settings.formats":[
    {
        "format": "compressed",
    },
]

옵션으로 출력 패스를 바꾸거나 Autoprefixer의 On/Off 등을 할 수 있습니다.
자세한 내용은 공식 문서를 참조하십시오!
htps : // 기주 b. 코 m/리토ぃck로 y/vs 코데ーぃゔぇー 싹 s-코 m피ぇr/bぉb/마s테 r/도 cs/세친 gs. md

Sass의 사용 예

Sass의 편리한 곳은 기능이나 내용 마다 파일 분할해 관리 가능한 곳.

나는 _settings.scss와 같은 파일을 만들고 변수와 함수를 넣는다.
(파일명의 처음에 안스코를 넣으면 컴파일되지 않습니다)
변수에는 색이나 통일하고 싶은 요소나 여백의 사이즈를 넣고, 함수에는 @mixin

또 부위마다 _header.scss등으로 레이아웃을 작성.
style.scss로 모든 분할 파일을 정리해 style.css로서 출력하고 있습니다.

꼭 간단하게 Sass 환경을 구축해 주세요!