SCSS,SASS는 CSS를 편리하게 이용할 수 있도록 도와주고 추가 기능도 있는 CSS의 확장판이다.(CSS를 확장하는 스크립트 언어)

ex)

<h1>식사 순서</h1>
<ol class='order'>
  <li>에피타이저</li>
  <li>수프</li>
  <li>빵</li>
  <li>샐러드</li>
  <li>메인디시</li>
  <li>디저트</li>
  <li>커피 or 차</li>
</ol>

1. CSS

.list {
  width : 100%;
}

li {
  color : white;
  font-weight : bold;
  background: yellow;
}

2. SASS

.list
  width : 100%
  li
    color : white;
    font-weight : bold;
    background: yellow;

괄호와 ;(세미콜론)이 사라진다.

3. SCSS

.list {
  width : 100%;
  li {
    color : white;
    font-weight : bold;
    background: yellow;
  }
}