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

CSS Preprocessor 란?

• Sass, Less 등이 있습니다.

• 이 친구들은 CSS 전(예비)처리기 입니다. 보통 CSS Preprocessor 라고 부릅니다.

• CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다.

• 사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.

어떻게 사용할까?

• 위에서 언급한 것처럼 웹에서는 CSS만 동작합니다.

• Sass, Less, Stylus 같은 전처리기(이하 ‘전처리기’로 표기)는 직접 동작시킬 수 없습니다.

• 그렇다면 어떻게 사용할 수 있을까?

  • CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다.
    전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등…
    표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.
    단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다.
    전처리기로 작성하고 CSS로 컴파일해서 동작시키는 거죠.

왜 Sass(SCSS)인가?

보통 언급되는 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있습니다.

• Less

  • Less에서 제공하는 기능의 한계.
  • 기능이 Sass나 Stylus에는 있음.
  • 하지만 진입장벽이 낮기 때문에 접하기 쉽고 그만큼 많이 사용

• Stylus

  • 깔끔하고 좀 더 세련됐으며 기능
  • 하지만 덜 사용되며(덜 유명하며) 비교적 늦게 나왔기 때문에 성숙도는 떨어짐
  • 그 때문인지 컴파일 후 사소한 버그가 몇몇

• Sass(SCSS)

  • 위에 언급한 두 가지 전처리기의 장점을 모두 가지고있음.
  • 문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능
  • 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭