웹 입문

CSS 전처리기 (Sass) 입문

우리는 지금까지 순수 CSS(Vanilla CSS)만으로 웹 페이지를 스타일링하고, 고급 기법으로 코드 효율을 높이는 방법을 학습했습니다. CSS 변수와 calc() 함수는 CSS 유연성을 크게 향상시켰지만, 여전히 순수 CSS만으로는 대규모 프로젝트에서 반복 작업을 줄이거나 복잡한 로직을 처리하는 데 한계가 있습니다.

변수와 중첩 (Nesting)를 중심으로 CSS 전처리기 (Sass) 입문의 판단 흐름을 읽습니다.

핵심 흐름

1

전처리기란 무엇이며 왜 필요한가?

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

2

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

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

3

Sass (SCSS) 핵심 기능

이제 SCSS의 주요 기능들을 살펴봅시다.

4

변수

브라우저는 이 변환된 CSS 파일을 해석하여 웹 페이지를 렌더링합니다.필요성 변수(Variables): 색상, 폰트 크기 등 자주 사용되는 값을 변수로 정의하여 한 곳에서...