SCSS 와 Sass 의 차이 간단 요약

일단 SCSS, Sass 둘다 CSS 를 확장시킨 기술이다 (전처리기 라고 부른다.)

둘다 중첩구문(nesting) 을 쓸수있다.

기존 css 에서 하위 선택자를 선택하려면

.select { display: flex; }
.select div:hover { cursor: pointer; }
.select > p { color: green; }

위와 같이 상위 선택자 .select 를 여러 번 써야 했지만 중첩을 이용하면

.select {
  display: flex;
  div: hover {
  	cursor: pointer;
  }
  > p {
  	color: green;
  }
}

이런식으로 .select 를 한번만 써줘도되고, 가독성도 더 좋아진다.

( .select 안에 이런이런 스타일들이 적용되는구나 하는게 한눈에 보임 )

이처럼 중괄호를 사용하여 중첩구문을 쓰는 게 SCSS 방식이고 Sass 는 중괄호나 세미콜론을 쓰지않고 들여쓰기로 구분하는데, 이게 SCSS 와 Sass 의 가장 큰 차이점이다.

또 & 문자로 상위 선택자를 가리킬 수 있다. (이렇게 좋은 기능이...)

마지막으로 SCSS 를 쓰려면 그냥 확장자를 .scss 로 붙이면된다.