내가 보려고 만든 개발 공부 일지

SCSS 와 Sass 의 차이 간단 요약 본문

CSS

SCSS 와 Sass 의 차이 간단 요약

kwangsunny 2021. 7. 16. 23:18

일단 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 붙이면된다.

Comments