CSS 전처리기 소개: SASS와 LESS의 힘을 활용하기
Source: Dev.to
CSS 전처리기란 무엇인가?
CSS 전처리기는 일반 CSS로 컴파일되는 스크립팅 언어입니다. 이들은 CSS에 기본적으로 존재하지 않는 프로그래밍 기능을 추가하여 동적이고 재사용 가능하며 모듈식 스타일을 더 쉽게 작성할 수 있게 합니다.
주요 장점
- Variables 재사용 가능한 값(색상, 폰트, 간격) 을 위해
- Nesting 선택자를 사용해 더 깔끔한 계층 구조
- Mixins 재사용 가능한 CSS 블록
- Functions and operations 계산 및 동적 스타일링을 위해
- Modular structure 파셜 및 임포트를 활용한 모듈식 구조
SASS (Syntactically Awesome Stylesheets) 소개
SASS는 아마도 가장 널리 채택된 CSS 전처리기일 것입니다. 원래 Ruby로 구축되었으며 현재는 Dart Sass로 유지 관리되고 있으며 두 가지 구문 스타일을 제공합니다:
- SCSS (Sassy CSS) – 일반 CSS와 비슷하지만 모든 SASS 기능을 지원합니다. 대부분의 사용자에게 권장됩니다.
- 들여쓰기 구문 – 중괄호와 세미콜론 대신 들여쓰기를 사용합니다.
SCSS 예시
$primary-color: #3498db;
nav {
background-color: $primary-color;
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 20px;
}
}이 코드는 변수들이 대체되고 중첩이 평탄화된 일반 CSS로 컴파일됩니다.
LESS (Leaner Style Sheets) 소개
LESS는 JavaScript로 처음 개발된 또 다른 인기 있는 CSS 전처리기로, 웹 프로젝트에 쉽게 통합할 수 있습니다. 구문은 SASS의 SCSS와 매우 유사하며 변수, 중첩, 믹스인, 연산을 지원합니다.
LESS 예시
@primary-color: #3498db;
nav {
background-color: @primary-color;
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 20px;
}
}SASS와 LESS의 주요 차이점
| 특징 | SASS | LESS |
|---|---|---|
| 원래 플랫폼 | Ruby (현재 Dart Sass) | JavaScript |
| 문법 | SCSS (CSS와 유사) & 들여쓰기 | CSS와 유사 |
| 변수 | $variable | @variable |
| 함수 / 믹스인 | 보다 광범위한 내장 기능 | 단순하고, 내장 함수가 적음 |
| 커뮤니티 및 도구 | 더 큰 커뮤니티와 생태계 | 인기 있지만 SASS보다 작음 |
| 통합 | 많은 빌드 도구에서 지원 | less.js로 브라우저에서 쉽게 실행 |
CSS 전처리기를 사용하는 이유
- Maintainability – 변수로 색상, 글꼴, 상수를 중앙 집중화합니다.
- Scalability – 파셜과 import를 사용해 스타일시트를 모듈화합니다.
- Productivity – nesting과 mixins를 활용해 더 간결하고 논리적인 스타일을 작성합니다.
- Advanced Features – 수학 연산을 수행하고, 재사용 가능한 functions를 정의하며, 반복 작업을 자동화합니다.
시작하기
오늘날 대부분의 프로젝트는 Webpack, Gulp와 같은 빌드 도구나 전용 CLI 도구를 사용하여 SASS 또는 LESS 파일을 CSS로 컴파일합니다. 많은 프레임워크와 CMS도 기본적으로 전처리기를 통합합니다.
기본 단계
- 컴파일러를 설치합니다 (
sass는 SASS용,lessc는 LESS용). - 변수, 중첩 등을 활용하여
.scss또는.less파일을 작성합니다. - 이를 브라우저용
.css파일로 컴파일합니다. - HTML을 수정하여 컴파일된 CSS를 참조하도록 합니다.
최종 생각
CSS 전처리기인 SASS와 LESS는 스타일링 위에 강력한 프로그래밍 패러다임을 추가함으로써 CSS 작성 방식을 혁신합니다. 이들은 더 깔끔하고 유지보수가 쉬우며 효율적인 스타일시트를 만드는 데 도움을 주어 현대 웹 개발에 필수적입니다. SASS든 LESS든 선택하든, 이러한 도구들을 활용하는 방법을 배우면 생산성이 향상되고 CSS 코드 품질이 높아집니다.
멋진 CSS 콘텐츠(기초부터 고급 주제까지)를 확인하려면 YouTube 재생목록을 확인하세요.