웹 입문

CSS 전처리기 (Sass) 입문

Sass는 반복되는 값, 중첩 선택자, 공통 스타일 조각을 CSS로 컴파일하기 전 단계에서 구조화합니다. 규모가 커질수록 규칙 재사용과 출력 CSS 관리가 함께 필요합니다.

Sass 변수와 중첩 문법이 반복되는 CSS 값을 정리하고 선택자 구조를 표현하는 방식을 확인합니다.

CSS 전처리기 흐름

1

전처리기 도입 기준

CSS 전처리기(CSS Preprocessor): CSS를 확장하는 스크립트 언어입니다.

2

Sass (SCSS 문법) 설치 및 사용 준비

Sass는 Ruby 또는 Node.js 환경에서 실행됩니다.

3

Sass (SCSS) 핵심 기능

SCSS에서는 변수, 중첩, 믹스인, 분할 파일로 스타일 규칙을 재사용합니다.

4

변수

브라우저는 변환된 CSS를 해석하고, 반복 값은 변수로 관리합니다.