Sass (CSS 전처리기)

송민혁·2022년 7월 13일
0

Sass를 사용하는 이유

CSS로만 작성하면 선택자(Selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택지를 매번 적어야 하는 점과 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정 변경해야 한다.

Sass를 사용하면,

  • 선택자의 중첩을 통해 반복되는 부모 요소 사용을 현저하게 줄일 수 있습니다.
  • 변수를 사용해서 CSS 속성과 값을 손쉽게 관리가 가능합니다.
  • SCSS[SASS]를 CSS로 컴파일 거쳐야 하는 번거로움이 있습니다. (단점)

한 가지 주의해야 할 점은, Sass는 CSS의 대체 언어가 아니라는 점입니다. Sass는 CSS의 확장 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈입니다. Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차입니다.

Sass vs Scss

{}(중괄호)와 ;(세미콜론)의 유무에 따른 사용 방식이 아주 조금 다를 뿐이다.

SASS는 중괄호와 세미콜론을 사용하지 않고, SCSS는 중괄호와 세미콜론을 사용한다.

따라서 SCSS가 CSS와 같은 방식이라 사용하고 코드를 합치기 편하다.

컴파일과 CSS 전처리기란?

VS code에서 Sass Complier 사용법

https://www.youtube.com/watch?v=VqzC1GPBE3M

0개의 댓글