❓ Sass? SCSS?

• Sass : Syntactically Awesome Style Sheets(문법적으로 짱 멋진 스타일시트)의 줄임말
• SCSS : Sassy CSS(멋진 CSS)의 줄임말
• Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
• CSS의 태생적 한계를 보완해준다.
  ① 변수의 사용
  ② 조건문과 반복문
  ③ Import
  ④ Nesting
  ⑤ Mixin
  ⑥ Extend / Inheritance

❓ CSS Preprocessor

• Sass와 SCSS는 CSS Preprocessor(전처리기)이다.
• CSS가 동작하기 전에 사용하는 기능이다.
• 웹에서는 CSS만 동작하기 때문에 전처리기로는 직접 동작시킬 수 없다.
• 전처리기로 작성을 한 후 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)한다.
  

❓ Sass 와 SCSS의 차이점?

• Sass와 SCSS의 차이는 {}(중괄호)와 ;(세이콜론)의 유무이다.

<ul class="computer">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

/* ===== 1. CSS ===== */
.list {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list li {
  color: blue;
  margin-right: 10px;
}
.list li:last-child {
  margin-right: 0;
}

/* ===== 2. Sass ===== */
.list
  width: 100px
  display: flex
  justify-content: center
  align-items: center
  li
    color: blue
    margin-right: 10px;
    &:last-child
      margin-right: 0

/* ===== 3. SCSS ===== */
.list {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  li {
    color: blue;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}