Sass ? SCSS?

• 참고 : SCSS 완전 정복

👉 주제

• css와 CSS pre-processor
• How to compile?
• Sass와 SCSS의 차이점
• 꼭 알아야할 Syntax

---

👉 CSS & CSS pre-processor

🤷‍♂️ CSS의 한계

CSS는 상대적으로 배우기 쉽고 재미있다.

하지만 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커진다.

하지만 웹에서는 표준 CSS만 동작할 수 있기 때문에 다른 선택권이 없습니다.

그렇다면 우리는 앞으로 계속 CSS만 사용해야 하는가?

🤷‍♂️ CSS pre-processor

전처리기 라고 불리우며, Sass,Less,Stylus 등 다양한 전처리기가 존재한다.

전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.

단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)한다.

전처리기로 작성하고 CSS로 컴파일해서 동작시키는 것이다!

---

👉 How to Compile?

node.js에서 지원하는 다양한 컴파일러가 있다. node-sass , gulp , webpack , parcel 등..

그 중에 parcel을 이용하여 컴파일을 해보자!

🤷‍♂️ Parcel이란?

공홈의 설명에 따르면 "불꽃 튀게 빠르고 설정이 필요 없는 웹 애플리케이션 번들러"
여기서 번들러란 , 여러개의 파일을 중복을 제거하고 하나로 묶어주는 역할을 하는 것이다.

🤷‍♂️ Parcel로 컴파일 하기

• 1. npm install parcel-bundler로 설치한다.
• 2. html에는 scss파일을 연동시킨다.
• 3. parcel index.html로 컴파일하면 dist와 cache등의 파일이 생성되며 , dist에
     컴파일된 파일이 생성된다.

---

👉 Sass와 SCSS의 차이

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말이다.


더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다. 예제를 살펴보자.

<!-- Sass -->

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

// SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔하다.
SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽다.
각각의 장단점이 있지만 보통은 SCSS를 추천한다고 한다.

---

👉 SCSS의 꼭 알아야 하는 유용한 Syntax Keywords

• 주석

// 컴파일 되지 않는 주석
/* 컴파일 되는 주석 */

• 중첩

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

• 상위 선택자 참조 (&)

• 변수

• 연산

• 스코프

• 전역 설정

• 재활용 (Mixin & include)

• 확장 (extend)

각 유용한 기능은 그때그때 찾아서 실적용해보자!

---

👉 끝으로,,

CSS의 pre-processor인 SCSS에 대해 알게 되었다.
물론 사용하는 방법도 중요하지만, 더욱 이해해야하는건 바로 pre-processor 이다.
어떻게 pre-processor가 동작되며, SCSS가 어떻게 CSS로 컴파일 되는 지,, 이런 것들을 차후에 꼭 공부해보자!!!