[TIL] CSS / Sass / SCSS 차이점 알아보기

What is CSS ?

 

CSS는 Cascading Style Sheets의 약어이고, 이는 웹페이지를 꾸미려고 작성하는 코드이다.

어느 정도 웹 개발을 공부한 사람이라면 프론트엔드, 백엔드 개발자를 막론하고 CSS라는 것은 흔히들 들어봤을 것이다.

공식문서에 의하면 CSS는 프로그래밍 언어가 아니고, Stylesheet 언어라고 한다. CSS를 통해 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용시킬 수 있다.

.list {
  width: 100px;
  float: left;
  }
li {
  color: red;
  background: url("./image.jpg");
  }
li:last-child {
  margin-right: -10px;
  }

 

CSS는 너무 익숙해
Sass 와 SCSS는 무엇일까 ??

 

Sass

Sass는 Syntactically Awesome StyleSheet 의 약어로, CSS의 단점을 보완하기 위해 만든 CSS의 전처리기이다. 

Sass는 개발자용 언어이기 때문에 웹 브라우저가 읽을 수가 없다. 따라서, 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결하는 과정이 필요하다는 단점이 존재한다.

 

Sass는 변수 정의를 허용한다. 변수는 $으로 시작할 수 있으며, 변수 할당은 콜론(:)으로 마무리 한다는 특징이 있다.

Sass 문법은 들여쓰기와 줄바꿈이 문법의 중요한 요소 중 하나이기 때문에 여러 줄 쓰기를 지원하지 않는다. Sass 문법을 멀티라인으로 작성할 시 컴파일 에러가 발생한다.

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

 

SCSS

SCSS란 Sassy CSS로 멋진 CSS라는 뜻이다. 이 SCSS와 Sass와의 가장 큰 차이점은 중괄호와 세미콜론을 사용한다는 데에 있다. 중괄호를 사용하지 않는 Sass와 다르게 기존 CSS의 문법의 특징인 중괄호를 그대로 사용하여 공백에 의해 컴파일 에러가 발생할 확률이 적고 좀 더 직관적으로 이해할 수 있다는 데에 특징이 있다.

 

이외에도 몇 개의 문법 차이가 있지만, SCSS가 Sass보다 늦게 나왔고 CSS의 호환성 면에서 더 장점을 가지고 있어 공식 문법도 SCSS 기준으로 나와있을 정도로 SCSS의 사용을 더 권장하고 있다.

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

 

 

[참조]

https://sass-lang.com/

https://heropy.blog/2018/01/31/sass/

https://namu.wiki/w/Sass