안녕하세요. 김용성입니다.
여러분들은 웹 사이트 스타일시트를 적용할 때 혹시 어떠한 것을 사용하고 계신가요?
CSS? SCSS?
저는 요즘 SCSS를 사용해서 작업을 하고 있는데요. SCSS가 어떤 것인지, 그리고 헷갈릴 수는 있지만 SCSS와는 조금 다른 SASS가 무엇인지에 대해서 포스팅하고자 합니다.

SCSS와 SASS가 뭔가요?

SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판이라고 보시면 됩니다.
기본 문법부터 한번 살펴볼까요?

다음과 같은 html 요소가 있다고 생각해보겠습니다.

<div class='section'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

인라인으로 해당 p태그들을 정렬하고 색을 입힌다고 가정했을 때 CSS/SCSS/SASS 각자의 코드는 다음과 같을겁니다.

CSS

.section {
  width: 100px;
  float: left;
  }
p {
  color: green;
  }

SCSS

.section {
  width: 100px;
  float: left;
  p {
    color: green;
  }
}

SASS

.section
  width: 100px
  float: left
  p
    color: red
    background: url("./image.jpg")

왜 사용할까?

어떤식의 문법차이가 있는지 확인이 되셨나요? 그리 큰 차이는 없습니다. 그렇다면 왜 굳이 CSS를 놔두고 SCSS와 SASS를 선호하는 것일까요?

바로 그 이유는 재사용성과 가독성에 있습니다.
CSS 로 단순한 스타일을 주는 것은 그리 어렵지 않습니다. 매우 직관적이기 때문이죠. 하지만 코드가 길어진다면 작성한 사람 본인도 헷갈릴 정도로 난해해 보이기 그지 없습니다.
한마디로

CSS는 문법 특성 상 작업이 크고 고도화 될수록 불편함이 생깁니다.

이에 SCSS와 SASS는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수를 보다 더 쉽게 만들어줍니다.

또한 [SCSS/SASS]는 다음과 같은 추가 기능과 유용한 도구들을 제공합니다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

SCSS와 SASS, 둘의 차이점은?

SCSS는 Sassy CSS의 줄임말이고 SASS는 Syntactically Awesome Style Sheets의 줄임말입니다. 둘 다 같은 의미이기도 하고, 통상적으로 둘 다 '사스'라는 이름으로 부르곤 하죠. 그리 큰 차이점은 없어요.
하지만 위에서 보여주었던 코드의 아주 조금의 차이가 있으며, SASS가 SCSS보다는 더 최신 툴이죠. 그렇기 때문에 아직까지는 범용성과 CSS 호환성에 대해 SCSS가 조금 더 우위를 점하고 있다는 점 정도만 알고 계시면 될 것 같아요. 또한 SASS 자체가 SCSS 기반으로 만들어진 것이기도 합니다.

처리 과정

SCSS와 SASS는 바로 우리의 코드에 적용이되는 것이 아닙니다. TypeScript와 유사하다고 보시면 돼요.
이는 그 자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문에 [SASS/SCSS]로 작성한 코드는 컴파일 후 일반 CSS의 문법으로 바꾼 뒤 적용됩니다.

이런식으로 말이죠.

🙌 마무리

어떤 것을 사용하는게 좋을지에 대해서는 아직 잘 모르겠어요. 저도 이제 SCSS/SASS 세계에 입문한 초보이기 때문에 그에 대해서는 이후에 별도 포스팅을 진행할 것 같습니다. 다만 CSS를 어느정도 많이 사용해보셨다면 이제는 SCSS와 SASS에 대해서 발을 들여놓는 것이 어떨까요?