[SASS - SCSS] 1-1. SASS 기초 (문법 구조)

현재 SASS를 공부하면서 내용을 정리하는 시간을 가져봤습니다.

 

SASS는 컴파일러 프로그램을 설치한 후에 진행을 하였는데, 저는 Scout-App을 이용하여 SASS를 습득하고 있습니다.

 

1. SASS의 기초

일단, SASS(Syntacically Awesome Style Sheet)는 확장자가 .sass와 .scss 두 종류가 있습니다. 이 두 파일의 차이점은 중괄호 {}와 ;을 사용하는 부분에서 차이가 납니다.

 

- SCSS 문법 구조

- SASS 문법 구조

▶ 중괄호와 세미콜론의 유무 이외에는 차이점이 없습니다. 결과물은 동일합니다.

 

위의 코드 처럼 변수를 선언해서 중복되는 코드를 줄이고, 반복적으로 사용하면서 편리하게 처리할 수 있기 때문에 필요한 기술입니다.

 

---

SCSS 문법으로 프로젝트를 작성하면서 알아낸 방법 등을 공유하면서 제 개인적인 공부 목적으로 이용하는 부분이기 때문에 부족한 부분이 있으면 피드백도 많이 부탁드리겠습니다.