[개념정리] CSS? Sass? SCSS?

web을 다뤄봤고, 최근 모던 웹 개발을 해보면 CSS 뿐 아니라 Sass, scss를 다뤄보고 들어봤을 것이다. 이에 대한 배경과 개념에 대해 정리를 하겠다.

 

CSS란?

(Cascading Style Sheets)

문서의 스타일을 구현하는 스타일 시트 언어이다.

 

배경

W3C에서 1996년 도입한 것으로, 이전에는 HTML언어 하나로 문서와 디자인을 모두 구현했었다. 예상되듯이 수정 및 유지보수를 해야하는 경우 스타일, 문서 중 하나를 수정 하더라도 모두 수정해야하는 단점이 있었고, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기가 CSS의 탄생 배경이다.

css에 대한 건 이미 다 잘알테니 이 정도로 하고 패스!

 

그럼 Sass는 뭐여?

(Syntactically Awesome Stylesheets) = 문법적으로 지리는 스타일 시트

 

Sass란?

Sass는 CSS의 단점을 보정하기 위한 CSS의 확장으로 나온 스크립트 언어이다.

프로젝트가 점점 커지고, 복잡해져가면서 스타일시트도 덩달아 커지고 관리할게 많아지며 복잡해진다. 이에 따라 유지보수도 당연히 힘들어진다. (프로젝트 규모가 커질 수록 스타일 시트 정말 보기 싫어진다..)

 단순해서 배우기 쉽지만 단순하기만 해서 가지는 이 단점들을 보완하기 위해 variable, nesting, mixin, inheritance 등의 개념이 추가된 것이 Sass이다. (앞서 말했듯이 말그대로 CSS의 확장)

Sass는 Preprocessing 과정을 통해 css로 해석 및 컴파일 된다.

 

실제 Sass가 가지고 있는 의미

Sass는 '전처리기(Pre-Processor)'와 그 '구문(Syntax)' 두가지를 모두 지칭한다. 그래서 좀 혼동이 오기도 한다.

Sass는 CSS의 { } 블록이 아닌 들여쓰기 감지를 핵심특성으로 갖는 구문을 가리켰으나, 'Sassy CSS'를 의미하는 SCSS라는 CSS친화적인 구문을 제공함으로써 Sass와 CSS 사이의 차이를 좁히는 방향으로 변화되어 왔다.

"유효한 CSS라면, 유효한 SCSS이다."

그 이후 Sass(전처리기)는 들여쓰기 구문인 Sass 와 앞서 말한 SCSS의 구문을 모두 사용 가능하며, 동등한 기능을 갖고 있어 원하는 구문을 사용하면 된다. 개취존중.

아무래도 CSS의 구문 형태가 더 익숙하기 때문에 SCSS를 더 많이 선호하는 경향이 있는 듯 하다.

여기서 그러면 SCSS까지 설명이 되었다.

 

기타

Sass외에 다른 전처리기들도 물론 존재하고, 후처리기의 개념도 있다.

• LESS
• Stylus
• cssnext
• PostCSS

CSS, Sass, SCSS 구문 맛보기 비교

구문의 차이를 눈으로 확인해보자!

 

CSS

/**CSS Syntax**/

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

Sass

/**Sass Syntax**/

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

SCSS

/**SCSS Syntax**/

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

위의 세개가 모두 같은 동작을 하는 코드 이다.

 

SCSS 사용법

SCSS, Sass를 사용하기 위해서는 별도의 loader가 필요하다.

그리고 앞서 말한 CSS의 단점을 보완하기 위한 확장된 기능들의 간단한 예시/가이드를 아래 공홈링크에서 참고 가능하다.

공홈 가이드 : https://sass-lang.com/guide

 

 

 

참고 : https://sass-guidelin.es/ko/

불러오는 중입니다...