[CSS] 전처리기

🌼 CSS 전처리기(Preprocessor)란?

CSS 전처리기는 전처리기 자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램이다. 대부분의 전처리기는 pure CSS에 존재하지 않는 특징을 갖고 있다. mixin, nesting selector, inheritance selector 등등. 이러한 특징을 갖는 전처리기를 사용하면 CSS 구조를 가독성있고 유지보수 좋게 만든다.

🌼 전처리기의 장점

• 중첩 선택자를 작성하기 쉽다. 예를 들어 Sass(SCSS)라는 전처리기는 {}를 사용해서 선택자들끼리 중첩됨을 표현할 수 있으며 이로 인해 중첩된 요소들에 CSS 스타일링이 좀 더 편하다.

//Sass(SCSS)
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

//CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

• 일관된 테마를 위한 변수사용, Mixins 생성 등으로 여러 프로젝트에 걸쳐서 테마 파일을 공유할 수 있으며 이로 인해 CSS의 유지보수성이 향상된다.

• 전처리기가 제공하는 내장함수 등을 활용하면 손쉽게 스타일링을 주고 변경할 수 있다.

🌼 전처리기의 단점

전처리기는 기본 CSS에서 제공하지 않으므로 이를 사용하기 위한 도구를 선택하고 학습하는데 시간이 걸리며 해당 코드를 컴파일하는데 시간이 소요되어 다소 느릴 수 있다.

출처: MDN, Sass 공식 홈페이지