1. 개요

• CSS 전처리 도구

• 공식문서

  Sass: Syntactically Awesome Style Sheets

  Sass(SCSS) 완전 정복!

• SCSS : 기존의 CSS와 호환이 되어 있어 사용이 용이함.

• SASS : 들여쓰기로 코드들을 구분함.

• SCSS는 표현(괄호,세미콜론) 이외에 기능은 Sass와 같음.

• 유일하게 다른 내용은 Mixins

• SCSS 가 브라우저에서 동작되려면 CSS로 변환이 되어야함.
• 그렇다면 왜 SCSS로 작성하는가??
  • 조상요소들의 선택자들을 반복하는 내용들을 중첩기능(Sass)으로 간편하게 줄여서 사용 가능.
  • 색들의 고유 번호들을 변수라는 개념으로 재활용하는 데에 유용하게 사용.
  • 순수한 CSS로만 작성하게 되면 불편한 부분들을 조금 더 손쉽게 작성하고, 웹에서 동작될 수 있도록 하기 위해서 SCSS(Sass)를 사용.
  • SCSS(Sass) : CSS Preprocessor (CSS 전처리기) ⇒ CSS (변환 = 컴파일)
• 그 외 less, stylus 도 있지만 CSS와의 호환을 고려해서 SCSS(Sass)사용.

2. 프로젝트 생성

npm init -y

npm i -D parcel-bundler

- script 수정
"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },

npm run dev

3. 주석

• 주석 방법 2가지
  • /* */ : CSS로 컴파일됨
  • // : CSS로 컴파일 안됨.

4. 중첩 with SassMeister

• > - 자식선택자

5. 상위(부모) 선택자 참조

• &- 상위 선택자 참조

6. 중첩된 속성