0. 시작전에

$ npm init -y

npm 프로젝트를 생성하겠다고 선언.

$ npm install -d parcel-bundler
(or)
$ npm install -d webpack
$ npm install -d webpack@<version>
$ npm install -d webpack-cli

parcel-bundler OR webpack 설치.

1. 개요

• CSS 전처리기 라고도 하며 SCSS 와 SASS는 부분적으로 문법만 있을 뿐 같다고 하여도 무방하다.
• 작성은 SCSS(SASS)로 작성하고 컴파일하여 CSS 로 변환되어 브라우저에서 실행된다.
• SCSS(SASS) 말고도 less, stylus 도 있다.

2. 주석

• SCSS 에는 두가지 주석 처리가 가능하며 그 종류는 다음과 같다.

  종류 A : /**/

  종류 B : //

  종류 A 는 CSS에서 사용되던 주석처리로 SCSS에서 컴파일 되어 CSS로 변환되면 그대로 주석으로 남아있게 된다.

  종류 B 는 SCSS에서 생겨난 주석처리로 SCSS에서 컴파일 되어 CSS로 변환되면 해당 주석은 없어지게 된다.

  → 컴파일 후 주석을 남기느냐 안 남기느냐 의 차이로 알맞게 사용하면 된다.

3. 중첩

• 후손 선택자

  .container {  // -> .container h1
  	h1 {
  		color: $color;
  	}
  }
  

• 자식 선택자

  .container {  // -> .container > h1
  	> h1 {
  		color: $color;
  	}
  }