SCSS - css preprocessors and set up

Sass(syntactically awesome stylesheets)는 css 의 pre-processor로 css의 한계와 단점을 보완하여 보다 가독성이 높고

코드의 재사용에 유리한 css를 생성하기 위한 css의 확장판이다.

css자체로 사용하여도 무리는 없지만 프로젝트의 규모가 커지고 수정이 빈번함에 따라 유지보수가 어려워 지는 단점이 있다

이런 css의 한계를 보완하기 위해 sass는 다음과 같은 추가 기능과 도구를 제공한다.

변수의 사용, 조건문과 반복문, import, nesting, mixin, extend/inheritance 등이 있다.

 

쉽게말해 궁극적인 목표는 css의 결함을 보정하는 것이다. 단지 css의 부족한 부분만 돕기를 원한다.

 

SCSS

Sass는 처음에 들여쓰기의 감지를 그 핵심 특성으로 갖는 구문을 가리켰다.

얼마 지나지 않아, Sass를 유지하는 사람들은 Sassy CSS를 의미하는 SCSS라는 CSS친화적인 구문을 제공함으로써

Sass와 CSS사이의 차이를 좁히기로 결정했다.

모토는 이렇다: 만약 유효한 CSS라면 유요한 SCSS이다

그 이후,  Sass는 두 가지 다른 구문을 제공해 오고 있다. 들여쓰기 구문으로도 알려진 Sass(전부 대문자가 아니다.)

그리고 SCSS.

둘은 정확히 동등한 기능을 갖고 있기 때문에 어느 것을 사용할지는 사용자에게 달렷다. 미관상의 문제이다.

 

일단 Sass/SCSS 는 Css를 프로그래밍 언어처럼 사용할 수 있게 해주고 그만큼 더 기능이 추가되었고 편리하고~

또~~ 프론트엔드 개발에서 대다수 업계에서 사용하고 있다는 것이다~

 

사용하기 위해서는 compile하거나 build하는 단계가 필요하다.

 

우선 설치와 빌드 과정은 생략하겠다 nomad coder강의 진행을 위해 nomad coder가 만들어 놓은 package.json과 gulpfile.babel.js를 먼저 가져와서 npm으로 모듈 설치후 진행 해본다.

간단하게 variables, mixins., extend, nesting에 대해서 배웠고 이제 클론 코딩을 진행해보자.