CSS, SCSS, SASS 차이는??

1. ToDo

- 그냥 문득 차이가 뭔지 궁금해짐..?

---

2. 일단 코드 차이부터!

HTML 기준으로 보자!

<ul class='list'>
  <li>1</li>
</div>

CSS에서는??

.list {
	width: 100%;	
}
li {
	width: 50%;
}
li:last-child {
  margin: 10px;
}

SCSS에서는??

.list {
  width: 100%;
  li {
    width: 50%;
    &:last-child {
      margin: 10px;
    }
  }
}

SASS에서는??

.list 
  width: 100%;
  li 
    width: 50%;
    &:last-child 
      margin: 10px;

---

3. 왜 써??

• CSS의 단점 : 프로젝트가 커지면 Selector가 많아지고 스타일을 계속 추가하게 되면 가독성이 떨어지고 구문의 한계가 있다.

---

4. 그래서 뭘 써야해??

• 개인적인 필자의 의견이다. 기존 CSS의 한계때문에 SCSS 또는 SASS를 사용하고자 한다면 SCSS를 추천한다. SASS는 문법이 Python과 비슷한데 들여쓰기에 대해서 신경을 많이 써야하고 타이핑은 적게할 수 있으나..뭔가 다시 수정하거나 할 때 가독성이 조금 더 떨어져보인다.

그래서 SCSS가 더 편하게 사용할 수 있다고 생각된다!