📌 Sass란?

Sybtactically Awesome Style Sheets의 약어로 CSS 전처리기 중 하나이며 CSS를 보완하여 더 효율적으로 스타일을 작성할 수 있게 도와주는 도구이다.
Sass는 웹 브라우저에서 직접 실행할 수 없기 때문에 Sass 파일을 CSS 파일로 컴파일 해서 사용해야한다.
또한 Sass에는 SCSS와 Sass 두가지 문법이 존재한다.

🔷 특징

🌐 참고 사이트: https://sass-lang.com/guide/

Variables

$ 기호를 사용하여 무언가를 변수로 만들어 색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 같은 항목을 저장할 수 있다.

Nesting

HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기를 중첩할 수 있다.

Partials

@use 규칙과 함께 파일명 앞에 _을 붙여 부분 Sass 파일을 만들 수 있다. 부분 Sass 파일은 CSS를 모듈화하고 더 쉽게 유지하는데 도움이 되는 방법이다. 부분적으로 쪼개진 Sass 파일들은 별도의 파일로 컴파일되지 않고 사용된다.

Modules

@use를 사용해 가져온 스타일 시트를 모듈이라고 한다. 이 규칙은 다른 Sass 파일을 모듈로 로드한다. 파일 이름을 기반으로 하는 네임스페이스를 사용해 Sass 파일의 변수 및 function 등 을 참조할 수 있다.

Mixins

@mixin을 사용해 사이트 전체에서 재사용하려는 CSS 선업 그룹을 만들 수 있다.

Extend / Inheritance

@extend와 %를 사용해 한 선택기에서 다른 선택기로 CSS 속성 집합을 공유할 수 있다.

❓ mixin vs extend
mixin -> 소스 코드의 중복을 막기 위해 사용
extend, %placeholder -> 연관성 있는 규칙을 만들기 위해 사용


따라서 선택자 간의 연관성이 존재한다면 extend를 사용하고, 연관성은 없지만 코드가 겹치는 선택자들이라면 mixin을 사용하면 된다

Operators

+, -, *, math,div(), %와 같은 소수의 표준 수학 연산자가 있다.

🔷 Sass VS SCSS

Sass

• .sass 확장자 사용
• {}와 ;을 사용하지 않고 들여쓰기로 블록과 규칙을 구분
• 간결하고 더 가독성이 좋은 코드를 작성할 수 있음

$primary-color: #333

body
  font-family: Arial, sans-serif
  color: $primary-color

.container
  width: 100%
  margin: 0 auto

SCSS

• .scss 확장자 사용
• {}와 ;을 사용하여 CSS와 유사한 문법 사용
• CSS와 문법적으로 거의 차이가 없어 기존 CSS 코드를 재사용하기 더 쉬움

$primary-color: #333;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
}

.container {
  width: 100%;
  margin: 0 auto;
}

CSS 대신 Sass를 사용하는 이유는❓
CSS를 사용하면 규모가 큰 프로젝트의 경우 불필요한 선택자의 과용이나 연산 기능의 한계, 구문의 부재 등 여러 불편함이 발생하는데 Sass의 여러 특징들을 통해 이러한 불편함을 쉽게 해결할 수 있다.