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

less.less
1
2
3
4
5
6
7
8
9
10
11
12
.border-radius (@radius) {
-webkit-border-radius: @radius;
-o-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

.user-list {
// need to use special `.` syntax
.border-radius(10px);
}

Sass

sass.sass
1
2
3
4
5
6
7
8
9
10
@mixin border-radius($radius)
-webkit-border-radius: $radius
-o-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius

.user-list
// need to use special `@` syntax
@include border-radius(10px)

Stylus

stylus.styl
1
2
3
4
5
6
7
8
9
border-radius()
-webkit-border-radius: arguments
-o-border-radius: arguments
-moz-border-radius: arguments
-ms-border-radius: arguments
border-radius: arguments

.user-list
border-radius: 10px

선택

그냥 3개 중에 마음에 드는 거 사용하시면 됩니다

연관문서