Sass 란?

🪀 Sass

Syntactically Awesome Stylesheets의 약자.

스타일시트 언어.
CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어.

 

• CSS의 전처리기, 즉 CSS를 만들기 위한 도구이다.CSS 👉🏻 Sass 컴파일러 👉🏻 SCSS
• 해석되어 CSS로 컴파일되는 스크립트 언어이다.
• 프로젝트가 점점 커지고 복잡해지면 스타일시트도 덩달아 커지고 관리할게 많아지며 복잡해진다. 이에 따라 유지보수도 힘들어진다. Sass는 CSS의 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성과 가독성을 통해 유지보수를 높여주는 언어이자 도구이다.
• variable, nesting, mixin, inheritance 등의 개념이 추가된 것이 Sass이다.
• Sass 공식 구현체는 오픈 소스이며 Ruby로 코딩되어 있다.

🪀 Sass의 특징

 

⛳️ Compile

Sass를 사용하기 위해서는 compile 과정이 필요하다.
여기서의 compile이란 SCSS로 작성된 파일을 CSS로 옮기는 과정을 말한다.

 

⛳️ SassScript는 4가지 자료형을 지원한다.

• 수(int)
• 문자열(String)
• color
• boolean
•  

⛳️ Sass 핵심 원칙

Sass는 기존 CSS보다 더 복잡해져선 안 됨을 원칙으로 한다.

 

⛳️ 색 표현

Sass에서 색을 표현하는 방법은 다음과 같이 4가지가 있다.

• CSS 색 키워드
• HSL 표기법
• RGB 표기법
• 16진법 표기법
•  

⛳️ 구문과 문법

• 주석
  한 줄 주석(//)이 추가되었다.
  한 줄 주석은 // 로 표기하며, CSS로 컴파일 되었을 때 나타나지 않는다. 여러 줄 주석은 CSS와 동일하며 CSS로 컴파일 되었을 때 나타난다.
• Nesting
  선택자를 내포하여 사용할 수 있다. '선택자를 내포함'은 해당 선택자의 Style Sheets를 작성할 때, 다른 선택자를 내포할 수 있다.
• 변수
  Sass는 변수를 $를 써서 표현한다. 변수를 사용하면 동시에 여러 곳에 동일한 값을 적용할 수 있고, 변경할 때 일일이 수정하지 않아도 된다.
  Sass 변수에는 전역 변수와 지역 변수가 있다.
• 문법
  Sass 문법에는 두 종류가 있다. 기존의 Sass 문법과 새로운 문법인 SCSS 문법이다. 보통 두 종류를 혼용해서 사용하는 경우가 많다.
  참고로 Sass 문법으로 작성한 파일은 .sass 확장자를 가지고, SCSS 문법으로 작성한 파일은 .scss 확장자를 가진다. 이 두 파일을 서로 convert 하려면 sass-convert라는 것을 사용하면 된다.