🌱 기초 프론트엔드
CSS 전처리기(Preprocessor)란?
쉽게 이해하기
커피를 만들 때 원두를 직접 갈고 내리는 대신, 캡슐 커피 머신을 사용하면 훨씬 간편하죠. CSS 전처리기는 CSS를 더 쉽고 효율적으로 작성할 수 있게 해주는 캡슐 커피 머신 같은 도구예요.
핵심 정리
CSS를 더 편리하게 작성할 수 있도록 도와주는 도구입니다.
자세히 알아보기
CSS 전처리기는 일반 CSS보다 더 강력한 기능을 제공하는 스크립팅 언어입니다. 변수, 중첩, 함수 등 프로그래밍 언어처럼 사용할 수 있어서 CSS를 훨씬 효율적으로 작성할 수 있어요.
가장 인기 있는 CSS 전처리기는 Sass(SCSS), Less, Stylus 등이 있습니다. 예를 들어 Sass에서는 변수를 사용할 수 있어요. `$primary-color: #3498db;`처럼 색상을 변수로 정의하면, 나중에 색상을 바꿀 때 한 곳만 수정하면 됩니다.
중첩(nesting) 기능도 매우 유용합니다. HTML 구조처럼 CSS를 작성할 수 있어서 가독성이 좋아지고 관리가 쉬워져요. 예를 들어 `.nav` 안의 `.item`을 스타일링할 때, 일반 CSS에서는 `.nav .item`처럼 반복해서 써야 하지만, Sass에서는 `.nav { .item { } }`처럼 중첩해서 작성할 수 있습니다.
전처리기로 작성한 코드는 브라우저가 바로 이해할 수 없기 때문에, '컴파일' 과정을 거쳐 일반 CSS로 변환됩니다. 대부분의 빌드 도구에서 이 과정을 자동으로 처리해주므로 신경 쓸 필요 없어요. 큰 프로젝트일수록 CSS 전처리기를 사용하면 코드 관리가 훨씬 수월해집니다.