[ Sass/SCSS] Sass/SCSS 시작하기

평소에 CSS에 대한 것들이나 구글링 하거나 CodePen을 사용하다 보면 항상 SCSS 라는 단어와 Sass라는 단어를 자주 보게 됩니다.  CSS에 관련된 것인데 문법을 보니까 어려울것같고, 해서 미뤄왔지만 이제 정리를 해야 할때가 왔습니다. 저는 리액트 프로젝트 스타일링은 SCSS로 할 것이기 때문에 SCSS를 쓰면 어떻게 편한지 왜좋은지를 알아야합니다. 

우선, Keyword 부터 적어 보겠습니다. 

CSS PREPROCESSOR
SASS
SCSS

CSS PREPROCESSOR

한글로 해석하면 CSS 전처리기라고 하는데 말이 너무 어렵습니다. 

쉽게, CSS가 동작을 하기전에 사용하는 기능입니다. 

리액트를 하면서 주로 사용하는 CSS 전처리기는 

• Sass/SCSS
• postCSS
• Less
• Stylus

이렇게 있어요. 이제 좀더 중요한  Sass와 SCSS를 배워보겠습니다. 

Sass

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

Sass 공식문서에서 나온 글입니다.

Sass의 궁극적인 목표는 CSS의 결함을 보정하는 것입니다. 

Sass는 단지 CSS의 부족한 부분만 돕기를 원합니다.

Sass와 SCSS의 차이점

제가 설명을 하는것보다 인용을 해오는 것이 더좋다고 느껴 내용을 인용해 오겠습니다. 

Sass는 처음에 들여쓰기의 감지를 그 핵심 특성으로 갖는 구문을 가리켰습니다.
얼마 지나지 않아, Sass를 유지하는 사람들은 Sassy CSS를 의미하는 SCSS라는 CSS 친화적인 구문을 제공함으로써 Sass와 CSS 사이의 차이를 좁히기로 결정했습니다.
모토는 이렇습니다: 만약 유효한 CSS라면, 유효한 SCSS이다.
그 이후로, Sass(전처리기)는 두 가지 다른 구문을 제공해 오고 있습니다: 들여쓰기 구문으로도 알려진 Sass(전부 대문자가 아닙니다, 제발), 그리고 SCSS.
둘은 정확히 동등한 기능을 갖고 있기 때문에 어느 것을 사용할지는 여러분에게 달렸습니다. 지금 시점에서는 이것은 순전히 미관상의 문제입니다.

참고 사이트는 여기를 참조하세요.

큰차이는 없고 미관상의 차이라는 Sass와 SCSS라는 내용이 핵심인것 같습니다. 

저는 여기서 SCSS를 사용하겠습니다. 처음부터 npm 으로 설치해서 어렵게 접하는것보다 쉽게 사용을 해보는것이 좋을것같아서 CodePen을 이용해서 설명을 드리겠습니다. 

이제 코드펜 예시를 보면서 하나씩 설명 드리겠습니다. 코드펜사용법을 모르시면 

2018/07/18 - [사이트 & 프로그램 추천] - codepen 사용

위에 코드펜 사용 가이드를 참조하세요. 쓰기쉽습니다. 

코드펜 예시의 상단에 예시는 CSS에 변수를 선언한 것입니다.

저렇게 상수처럼 변수 선언을 하면 무엇이 편한지보겠습니다.

CSS를 수정하거나 아니면 색을 입힐때 #598fba같은 색을 써서해야하는지 아니면 수정을할때 색상 기호를 외우지 않는 이상 재사용을 하거나 색을 바꿀때  불편함이 있습니다. 하지만 저렇게 색을 변수화하면 재사용을 하는데 있어서 편합니다. 사용은 아래 그림처럼 변수를 원하는 곳에 대입하면됩니다.

다음은 이제 중간에 이상하게 껴있는 &>div 을 살펴보겠습니다.

저기에 있는 & 기호는 부모 선택자라는 뜻이에요. 저기에서  flexTest 가 & 이겠네요. 

부모 선택자를 선택하기위해서 부모선택자를 여러번쓰고 여러번 써서 CSS소스가 커지다보면 소스 관리가 잘안되는 경험이 있으시다면 저렇게 부모선택자에서 & 사용이 정말 편하다는 것을 아실 수 있으실 것 같습니다. 

다음 회차에는 더 전문적으로 SCSS에 대한 문법과 주의 사항도 배워 보겠습니다. 감사합니다.