[SCSS] SCSS 1 / SCSS 정의, SASS 비교, 컴파일 과정

SCSS란?

• SCSS(Sassy CSS)는 CSS Preprocessor(전처리기) 중 하나인 Sass의 문법 형식
• 기본 CSS보다 더 강력한 기능(변수, 중첩, 함수, 믹스인, 모듈화 등)을 제공해서 코드 재사용성과 유지보수성을 높여줌
• 작성된 SCSS는 브라우저가 직접 읽을 수 없고, CSS로 컴파일해야 브라우저에서 사용 가능함

---

CSS Preprocessor

• CSS Preprocessor(전처리기)는 CSS를 확장하는 언어
• CSS 단점: 코드 중복이 많고, 큰 프로젝트에서 유지보수가 힘듦
• 전처리기 역할: 변수, 조건문, 반복문, 함수 같은 프로그래밍 개념을 CSS에 도입해서 효율적으로 작성할 수 있게 해 줌
• 전처리기 종류 : Sass(SCSS), LESS, Stylus

---

SCSS → CSS 변환 (컴파일) 과정

SCSS는 브라우저에서 직접 실행되지 않고, 컴파일 과정을 거쳐 CSS로 변환

1. SCSS 작성 → .scss 파일을 작성.
2. 컴파일러 실행 → Sass 컴파일러가 SCSS 코드를 해석.
   • CLI (터미널 명령어 sass style.scss style.css)
   • 빌드 툴 (Webpack, Gulp, Vite 등)
   • IDE 확장 프로그램 (VSCode Sass 플러그인 등)
3. CSS 출력 → 최종적으로 브라우저가 해석 가능한 .css 파일 생성.
4. 브라우저 적용 → <link rel="stylesheet" href="style.css"> 로 HTML에 연결.

---

SCSS vs SASS 문법 차이

Sass는 두 가지 문법을 지원합니다.

구분	SCSS	SASS
확장자	.scss	.sass
문법 스타일	CSS와 거의 동일	인덴트 기반(파이썬 스타일)
중괄호 {}	필요함	필요 없음
세미콜론 ;	필요함	필요 없음
학습 난이도	CSS와 비슷해서 쉬움	간결하지만 익숙해지는 데 시간이 필요

---