작성자 : 임성준, 정혜영, 이윤서

---

Sass

• Syntactically Awesome Style Sheets의 약어

• CSS 전처리기(Preprocessor)입니다.

  • CSS 문법을 기반으로 하며, 컴파일 과정을 통해 .css 파일로 변환됩니다.

• CSS 코드를 더 효율적이고 유지보수하기 쉽게 만들어주는 확장 언어입니다.

• Sass는 변수, 중첩 규칙, 믹스인 등 다양한 기능을 제공하여 CSS 작성의 반복적인 작업을 줄이고 코드 구조를 개선합니다.

  • 중첩 구조를 통해 코드가 계층적으로 정리되어 읽기 쉽습니다.
  • 색상, 크기 등을 변수로 선언해 반복 사용 가능합니다.
    • ➡️ $main-color: #3490dc;
  • 반복되는 스타일을 함수처럼 작성해 재사용 가능합니다.
    • ➡️ @mixin, @function

• Sass 코드를 작성하면 컴파일 과정을 거쳐 일반 CSS 파일로 변환되어 브라우저에서 사용됩니다.

• 공통 스타일은 _variables.scss, _mixins.scss 등으로 분리 관리 권장합니다.

Sass의 장점

• 코드 재사용성 향상
• 유지보수성 증가
• 가독성 및 구조화
• 개발시간 단축

Sass와 SCSS의 차이점

구분	Sass (Original Syntax)	SCSS (Sassy CSS)
파일 확장자	.sass	.scss
문법 스타일	들여쓰기 기반 (중괄호와 세미콜론 필요 없음)	CSS와 유사 (중괄호 {}와 세미콜론 ; 사용)
호환성	CSS 문법과 다름	기존 CSS 문법과 100% 호환 가능
가독성	간결하지만 들여쓰기에 의존	CSS에 익숙한 사람들에게 친숙

사용 예제

// 변수로 사용한 방법
$main-color: #3498db;

.button {
  color: $main-color;
}