CSS 전처리기 (CSS Preprocessor)

작성일 2021-04-29 Edited on 2022-10-04 In programming , html Symbols count in article: 1.1k Reading time ≈ 1 mins.

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

.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

@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

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개 중에 마음에 드는 거 사용하시면 됩니다

연관문서

HTML