PostCSS vs Scss ?

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.

문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.

---

PostCSS vs Scss ?

결론부터

PostCSS는 CSS 후처리기, Scss는 CSS 전처리기입니다. 실행되는 시점이나 방법이 다르기 때문에 한 프로젝트에 둘 다 적용할 수 있습니다. 즉, 둘 중 하나만 선택할 필요는 없으며, 필요한 경우 각 장단점에 맞게 기능을 취사선택하여 사용하면 됩니다.

동시에 사용하는 경우, Scss로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환됩니다.

PostCSS란? [공식 사이트]

CSS Postprocessor(후처리기). JS 플러그인을 사용하여 CSS를 변환하는 도구입니다. CSS의 Babel로 볼 수 있습니다.

장점

> 모듈식 사용

   필요한 플러그인만 포함하여 사용할 수 있다.

   전체를 다 포함하지 않아도 되므로 속도가 빠르다.

> JavaScript 기반

   필요한 플러그인을 직접 개발할 수 있다.

> CSS 표준 문법 기반

   CSS 작성을 위해 별도로 학습할 필요가 없다.

단점

> (Sass에 비해) 강력한 문법을 제공하지 않는다.

> 필요한 플러그인을 직접 찾아서 조립해야 한다.

> 플러그인의 지원이 중단될 수 있다.

사용 예시

2021.06.23 기준 별 2000개 이상인 플러그인만 가져온 것으로 전체 플러그인은 링크에서 확인하실 수 있습니다.

- autoprefixer: -webkit- 등의 prefix를 자동으로 넣어준다. (별 19599개)

// 변환 전
a {
  display: flex;
}

// 변환 후
a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

- stylelint: stylelint 규칙에 맞지 않는 stylesheet의 오류, 버그 등을 알려준다 [stylelint 규칙]. (별 8819개)

- cssnext: CSS 미래 스펙을 사용할 수 있게 한다. 아래의 preset-env로 대체되었다. (별 5396개)

- lost: grid system을 쉽게 작성할 수 있게 한다 [Docs 참고]. (별 4488개)

- cssnano: 배포 시, CSS 크기를 최적화한다. (별 3851개)

- colorguard: 미리 설정한 color set을 유지할 수 있게 돕는다. (별 2443개)

- cssfmt: stylelint 규칙에 맞게 포맷을 변경한다(vscode 자동정렬과 유사). (별 2117개)

- preset-env: 최신 CSS 문법을 설정한 브라우저가 이해할 수 있는 버전으로 변환한다. (별 2017개)

Scss(Sass)란? [공식 사이트]

CSS Preprocessor(전처리기). CSS로 변환되는 CSS3 확장 언어입니다. Scss로 작성된 파일은 컴파일을 통해 CSS 문법으로 변환됩니다.

장점

> 강력한 문법 제공

   변수 사용, 네스팅, 셀렉터 상속, 함수, mixin, for, if 등 강력한 문법을 제공한다.

> 재사용 용이

단점

> 러닝 커브

   CSS 작성을 위해 Sass 문법을 공부해야 하는데 러닝 커브가 높은 편이다.

사용 예시

예시는 일부만 가져온 것으로 전체 기능은 링크에서 확인하실 수 있습니다.

- 변수

// SCSS
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack; // 미리 선언해둔 변수를 사용할 수 있다.
  color: $primary-color;
}

// CSS
body {
  font: 100% Helvetica, sans-serif; // 컴파일을 거치면 변수가 값으로 변환된다.
  color: #333;
}

- Nesting

// SCSS - 중첩으로 작성할 수 있다. 여러 depth로도 작성 가능하다.
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

// SCSS - 중복되는 CSS 정의들을 재사용 가능한 mixin으로 만들 수 있다.
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

// CSS
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}