CSS 전처리기, Sass 혹은 Stylus

이제 생활코딩의 CSS 수업 영상도 끝을 향해 달려가고 있다.

다음 포스트가 생활코딩의 CSS 수업 영상의 마지막 포스트가 될 것 같다.

이번에 배울 내용은 초보자들에게는 그렇게까지 중요하지는 않은 내용이다.

하지만 나중에는 유용하게 써먹을 수도 있는 내용이니 한번 살펴보자.

이전 포스트

CSS 파일 분리와 최적화: 외부 스타일 시트와 Minify 가이드

CSS를 효율적으로 관리하고 웹사이트의 성능을 극대화하는 방법을 알아봅니다. HTML에서 스타일 코드를 분리하는 link와 @import 방식의 결정적인 성능 차이를 비교하고, 파일 용량을 줄여 로딩 속도를 높이는 코드 경량화(Minify)까지 확인해 보세요.

생활코딩 CSS 수업 영상: Preprocesser

Stylus | An expressive, robust, feature-rich CSS language built for Node.js

Expressive, robust, feature-rich CSS language built for nodejs

stylus-lang.com

영상에서 소개한 Stylus는 CSS를 더 효율적이고 프로그래밍하듯 작성할 수 있게 해주는 CSS 전처리기(Preprocessor)다.

작성한 스타일 코드는 나중에 브라우저가 읽을 수 있는 일반 CSS 파일로 변환된다.

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass-lang.com

Sass도 그런 종류의 전처리기다.

CSS 전처리기 사용자 중 약 80~90%가 Sass를 사용한다.

이런 전처리기는 CSS를 공부하는 모두에게 필수인 것은 아니다.

전처리기를 쓰려면 이를 변환(컴파일)하는 환경을 구축해야 하는데, 작은 프로젝트나 개인 블로그를 관리하는 용도로는 이 과정이 오히려 배보다 배꼽이 더 큰 작업이 될 수 있다.

이런 경우에는 순수 CSS에 집중하는 것이 훨씬 현명하고 효율적이다.

하지만 큰 프로젝트(예: 수백 개의 페이지가 있는 기업 사이트)를 관리하는 개발자의 경우라면 다음과 같은 이유로 전처리기가 필요할 수 있다.

• 코드의 구조화: 수천 줄의 코드를 파일별로 나누고 관리하기가 훨씬 편하다.
• 반복 줄이기: 똑같은 색상값이나 레이아웃 설정을 '믹스인(Mixins)'이라는 기능을 통해 한 줄로 재사용할 수 있어 오타나 실수를 줄여준다.
• 중첩 문법: CSS는 선택자를 반복해서 써야 하지만, 전처리기는 계층 구조로 작성할 수 있어 코드의 가독성이 좋아진다.

CSS 코드가 수천 줄로 늘어나 관리가 힘들다면 Sass나 Stylus 같은 'CSS 전처리기'에 관심을 가져보자.

변수와 함수를 사용해 스타일을 구조적으로 짤 수 있게 해주는, 개발자들을 위한 마법 같은 도구다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.