#3.0-3.4

CSS Preprocessors and Set Up

SCSS는 CSS Preprocessors(전처리기)라고 말한다. SCSS를 compile를 해서 일반 CSS처럼 사용하게 할 것이다. CSS 전처리기는 처음에는 Sass가 먼저 쓰였고 Scss랑 다른 syntax를 가지고 있었는데 이제는 Scss가 Sass를 위한 공식적인 syntax로 릴리즈 되었다.

다른 전처리기로는 stylus와 less가 있다. 그 외에 다양한 전처리기가 있지만 Scss와 Sass를 배우는 이유는 이것이 업계의 표준이 되어가고 있기 때문이다. front-end 개발자로서 개발 속도가 엄청나게 빨라지기도 해서 그렇다.

Scss는 css를 programming language처럼 만들어준다. 또한 Scss는 Syntax를 개선하고 css에는 없는 좋은 기능들을 사용할 수 있다.

Scss는 사용하기가 쉽지만은 않다. 그렇기에 gulp에서 compile하고 build하는 단계를 거친다. 참고로 gulp는 nodeJS package이다. 오래된 코드를 최신코드로 바꾸거나 Scss,Sass를 평범한 Css로 바꿔주기도 한다.

이 강의를 들어가기전에 gulp에 대한 사전 지식이 필요하다.

Gulp 90분 마스터하기 - 노마드 코더 Nomad Coders

Variables and Nesting

scss폴더에서 gulp를 통해 css로 변환된 scss를 사용하기 위해서 index.html이 참조하는 style파일의 확장명이 scss가 아닌 css로 설정 되어야한다.

<aside> 📌 gulp-scss은 scss를 css로 컴파일 해주는 플러그인이다. 즉, 우리가 사용하는 style은 scss가 아닌 scss가 컴파일된 css라는걸 잊지 말자.

</aside>

scss에서 사용할 첫번째 기능은 variable기능이다. 물론 css에도 존제하지만 scss로 설정한 variable이 섹시하기 때문에 사용한다. variable은 웹페이지에 중요한 style이나 color를 설정할때 사용한다.

variable을 사용하기 위해서 scss폴더에 _variable.scss파일을 하나 만든다.

<aside> 📌 파일명 앞에 언더바_를 사용하는 이유는 gulp-scss 플러그인으로 css로 컴파일할때 언더바가 있는 파일은 제외하기 위해서 사용한다.

</aside>