Sass의 특징

Variables

변수를 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법으로 생각할 수 있습니다.

색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 항목을 저장할 수 있습니다. Sass는 $ 기호를 사용하여 변수를 만듭니다.

SCSS로 작성 -> CSS로 해석

---

Nesting

Sass를 사용하면 HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택자를 중첩할 수 있습니다.

(좌) SCSS, (우) Sass

---

Partials

다른 Sass파일에 포함될 수 있는 CSS의 작은 조각이 포함된 '부분 Sass 파일' 을 만들 수 있습니다.

CSS를 모듈화하고 유지 관리를 더 쉽게 유지하는데 도움이 되는 방법이며, 부분 파일은 앞에 밑줄이 붙은 파일 이름의 Sass 파일입니다. (예시 : _Partials.scss )

밑줄을 사용하면 파일이 부분 파일일 뿐이며, Sass가 CSS파일로 생성하지 않습니다.

부분 Sass파일은 @use와 같이 사용됩니다.

---

Modules

@use를 사용하여 가져온 스타일 시트를 모듈이라고 부릅니다.

단일 파일에 모든 Sass를 작성할 필요는 없으며, @use 규칙을 사용하여 원하는대로 분할할 수 있습니다.

이 규칙은 다른 Sass 파일을 모듈로 가져옵니다. 

즉, 파일 이름을 기반으로하는 네임스페이스를 사용하여 Sass 파일의 변수, mixins 및 function을 참조할 수 있습니다.

styles.sass에서 @use 'base'를 통해 $primary-color을 사용함 (오른쪽 CSS파일에 적용된 걸 볼수있다.)

@use 사용시 '_base' 라고 작성하지 않고 'base'로 작성해도 됩니다.

 

---

Mixins

CSS의 반복되는 부분을 mixins르 통해 해결 가능합니다

@mixin으로 선언하며 , @include를 통해 사용합니다.

---

Extend/Inheritance

mixins와 비슷합니다

@extend를 사용하면 한 선택자에서 다른 선택자로 CSS 속성 집합을 공유할 수 있습니다.

 

---

Mixins/Extend 차이

mixin은 소스코드의 중복을 막기위해 사용하고, extend, %placeholder는 연관성 있는 규칙을 만들기 위해 사용합니다.

 

연관성이 존재한다면 extend를 사용하고, 연관성은 없지만 코드가 겹치는 선택자들이라면 mixin으로 중복제거를 합니다.

 

---

Operators

+, -, *, math.div() 등 %와 같은 소수의 표준 수학 연산자를 사용할 수 있습니다.

 

 

출처 : https://sass-lang.com/guide

Sass: Sass Basics