[CSS] CSS 전처리기(Preprocessor)란?

CSS 전처리기는 CSS에 없는 변수, 조건문, 반복문, 함수와 같은 프로그래밍 개념을 추가하여 스타일을 작성할 수 있게 하는 도구입니다. 전처리기는 개발자가 작성한 확장된 CSS 코드(Preprocessor Code)를 브라우저가 이해할 수 있는 일반 CSS 코드로 변환(컴파일) 합니다.

전처리기는 CSS 작성의 유연성과 재사용성을 높여주는 역할을 하며, 특히 대규모 프로젝트에서 스타일 코드를 관리하는 데 많은 도움을 줍니다.

사용해야하는 이유

1) 코드 재사용성 증가
전처리기는 CSS에서 반복해서 사용되는 색상, 크기, 레이아웃 등의 값을 변수로 관리할 수 있어, 코드의 재사용성을 높이고 유지보수를 용이하게 합니다.

2) 코드의 가독성 향상
전처리기를 사용하면 중첩(Nesting), 모듈화 등이 가능해져 코드가 더 구조적이고 이해하기 쉬워집니다. 복잡한 스타일 구조도 직관적으로 표현할 수 있습니다.

3) 복잡한 작업의 간소화
반복문이나 조건문과 같은 프로그래밍 개념을 활용하여 복잡한 작업을 간단하게 구현할 수 있습니다. 예를 들어, 반복문을 통해 여러 요소에 일관된 스타일을 쉽게 적용할 수 있습니다.

4) 유지보수성 향상
스타일의 구조를 개선하여 수정할 부분을 쉽게 찾아 변경할 수 있습니다. 대규모 프로젝트에서 스타일 가이드를 일관되게 유지하는 데 유리합니다.

CSS 전처리기 종류와 특징

Sass (Syntactically Awesome Style Sheets)

Sass는 가장 널리 사용되는 CSS 전처리기로, 변수, 중첩, 믹스인(mixin), 반복문, 함수 등을 지원합니다. .scss와 .sass 두 가지 파일 확장자를 제공하며, 두 문법 모두 일반 CSS보다 더 강력한 기능을 가지고 있습니다.

파일 확장자: .scss (주로 사용), .sass
주요 기능: 변수, 중첩, 믹스인, 조건문, 반복문, 함수 등

$primary-color: #3498db;
$padding: 10px;

.button {
  color: $primary-color;
  padding: $padding;
  &:hover {
    background-color: lighten($primary-color, 20%);
  }
}

LESS (Leaner Style Sheets)

LESS는 JavaScript 기반의 전처리기로, Sass와 유사한 기능을 제공합니다. 주로 변수, 믹스인, 중첩, 함수 기능을 포함하며, CSS와 매우 유사한 문법으로 작성할 수 있어 진입 장벽이 낮습니다.

파일 확장자: .less
주요 기능: 변수, 중첩, 믹스인, 함수 등

@primary-color: #3498db;
@padding: 10px;

.button {
  color: @primary-color;
  padding: @padding;
  &:hover {
    background-color: lighten(@primary-color, 20%);
  }
}

Stylus

Stylus는 간결한 문법을 제공하는 CSS 전처리기로, 중괄호 {}와 세미콜론 ;을 생략할 수 있는 유연한 문법을 제공합니다. Stylus는 특히 재사용성과 가독성이 뛰어나며, CSS의 유연성을 더욱 높여주는 것이 특징입니다.

파일 확장자: .styl
주요 기능: 변수, 중첩, 믹스인, 조건문, 반복문, 함수 등

primary-color = #3498db
padding = 10px

.button
  color primary-color
  padding padding
  &:hover
    background-color lighten(primary-color, 20%)

CSS 전처리기의 주요 기능

1) 변수 (Variables)
CSS 전처리기에서는 색상, 폰트 크기, 패딩 값 등을 변수로 저장하여 재사용할 수 있습니다.

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

2) 중첩 (Nesting)
CSS 전처리기에서는 중첩을 통해 부모-자식 관계를 표현할 수 있어 코드 가독성이 높아집니다.

.nav {
  background-color: #333;
  .nav-item {
    color: white;
    &:hover {
      color: yellow;
    }
  }
}

3) 믹스인 (Mixins)
믹스인은 재사용 가능한 스타일 조각으로, 복잡한 스타일을 묶어서 반복 사용하기 좋습니다.

@mixin button-style($color, $padding) {
  color: $color;
  padding: $padding;
  border-radius: 5px;
}

.button {
  @include button-style(#3498db, 10px);
}

4) 조건문 및 반복문
전처리기는 조건문과 반복문을 사용해 스타일을 동적으로 작성할 수 있습니다.

@for $i from 1 through 3 {
  .margin-#{$i} {
    margin: #{$i * 10}px;
  }
}