Sass 기초 설치

Concept

• Sass는 Syntactically awesome StyleSheets이다.
• Sass는 Css 전처리기,그리고 이를 위한 구문 두 가지 의미를 가진다
• css를 사용할 때의 불편함을 해소해주는 Css 확장 언어이다.
• Sass 전처리기는 Sass 구문 뿐 아니라 SCSS 구문 또한 Css로 변환할수있다.
• SCSS구문은 Sass 언어의 하위 개념이다.

컴파일 방법

• VS code Expansion : Live Sass Compiler

/* main.scss 파일 생성 */

h1 {
    color: red;
    background-color: yellow;
}

/* Watch Sass 실행 */

/* main.css & main.css.map이 생성됨 */

• npm || yarn Sass 설치

npm install -g sass

yarn add sass

• 버전 확인

sass --version

• sass 빌드 명령어

sass 작업할 폴더 파일명 : 빌드될 폴더 파일명
sass style/main.scss:style/main.css //한번 실행
sass --watch style/main.scss:style/main.css// 계속 실행