변수문법을 활용한 SCSS 작성 - 컴파일 - CSS연결까지

 

 

 

• css 전처리로 사용할 style.scss 파일을 생성하세요.
• scss의 기본문법 중 변수 선언을 이용한 방법으로 primary-color 작성하세요.
• body 선택자에서 원하는 속성으로 변수를 호출하세요.

$primary-color: #eee;

body {
    background-color: $primary-color
}

 

 

 

• 터미널을 실행하세요.
• sass <컴파일할 scss파일명> <컴파일후 css파일명> 문법에 맞게 작성하세요.
• 컴파일된 css 결과 파일을 확인하세요.

sass style.scss style.css

 

 

• html 외부 스타일시트로 컴파일한 css 연결하세요.
• 적용한 웹 결과를 확인하세요.

<link rel="stylesheet" href="./styles/style.css">

 

---

 

(선택) 실시간 컴파일하기

• 실시간 컴파일을 위해 vs code 플러그인 “Live Sass Compiler” 설치하세요.

 

• 컴파일을 1번 이상 진행 후 vs code 하단 Watch Sass로 실시간 컴파일 진행세요.

실시간 추적중인 플러그인 상태

실시간 추적 해제된 플러그인 상태