SCSS(Sass)

Sass에 대해서

J-Plum 2023. 4. 22. 06:14

Sass(Syntactically Awesome Style Sheets)는 기능이 뛰어나고 안정적인 CSS 확장 언어

 

CSS를 사용하는 것 만으로 많은 앱을 스타일링 할 수 있지만 만약 스타일시트가 점점 더 커지고 복잡해지면 유지 관리하기 어려워지게 됩니다.

Sass에는 중첩, 믹스인, 상속 및 유지관리가 가능한 CSS를 작성하는 데 도움이 되는 기능이 있으며,

아직 CSS에는 존재하지 않는 기능이 있습니다.

 

Sass로 작업을 시작하면,  사전 처리된 Sass 파일을 웹사이트에서 사용할 수 있는 일반 CSS 파일로 저장합니다.

 

Sass와 SCSS

Sass는 CSS로 컴파일되거나 해석되는 전처리기 스크립팅 언어입니다.

SassScript는 그 자체가 스크립팅 언어인 반면 SCSS는 기존  CSS 구문 위에 구축되는 SASS의 기본 문법입니다.

 

Sass vs SCSS

  1. Sass는 원본 구문이 필요할 떄 사용되며 SCSS에는 코드 구문이 필요하지 않습니다.
  2. Sass는 엄격한 들여쓰기를 따르지만 SCSS에는 엄격한 들여쓰기가 없습니다.
  3. Sass는 공백이 있고 세미콜론이 없는 느슨한 구문을 가지고 있으나, SCSS는 CSS에 더 가깝고 세미콜론과 중괄호를 사용합니다.
  4. Sass는 sass, SCSS는 scss 확장자를 사용합니다.
  5. Sass에는 문서 추가를 위해 SassDoc를 지원합니다.
  6. Sass는 CSS로 사용할 수 없습니다.
  7. Sass는 기존 CSS 프로젝트에 추가하기 어려운 반면에 SCSS는 새 코드를 추가하는 것 만으로 기존 CSS프로젝트에 추가할 수 있습니다.

 

 

SCSS문법을 기반으로 작성하게되면, Sass 전처리기로 CSS로 해석하게됩니다.