CSS 전처리기 (CSS Preprocessor)
Hexo 의 테마인 icarus 에서 Stylus 를 사용하고 있어서
Stylus 에 대해서 공부하다가
CSS 전처리기(CSS Preprocessor) 에 대해서 정리해놓으려고 합니다.
CSS 전처리기란?
CSS 가 복잡해지면서 CSS 코드가 늘어나니 프로그램 처럼 관리하려고 나타난 게
CSS 전처리기(CSS Preprocessor) 입니다.
CSS 전처리기 구조
작성은 Syntax 에 맞게 프로그래밍 하고 컴파일러를 통해서 css 파일로 결과물이 나오는 구조
CSS 전처리기 종류
가장 유명한 CSS 전처리기는 아래 3종 입니다
- Sass
- Less
- Stylus
장점
- 재사용성 : 프로그래밍이 가능하니 반복적인 항목을 줄일 수 있다
- 유지보수좋음 : 상속, 중첩을 통해 구조화된 코드로 유지 가능
단점
- 외국이야 퍼블리셔라는 직무가 없는데
- 이걸 프론트앤드 개발자가 아닌 퍼블리셔들이 만든다고
CSS 전처리기 구문 비교
LESS
1 | .border-radius (@radius) { |
Sass
1 | @mixin border-radius($radius) |
Stylus
1 | border-radius() |
선택
그냥 3개 중에 마음에 드는 거 사용하시면 됩니다