Sass

1. 전처리기

전처리기는 CSS를 작성할 때 사용하는 스크립팅 언어로, 개발자가 더 동적이고 효율적으로 스타일을 작성할 수 있도록 도와주는 도구이다. 화면 구현에서 CSS를 사용하고자 한다면 전처리기는 필수 선택.

(1) CSS 전처리기는 다음과 같은 프로그래밍 언어의 기능을 CSS에 도입한다.

• 변수: 색상이나 폰트 크기와 같은 값을 변수로 저장하여 전체 문서에서 일관된 디자인 유지
• 함수: 반복적인 작업을 줄이고 코드 재사용성 향상
• 믹스인(mixin): 코드의 중복을 줄이고 재사용 가능한 스타일 블록 생성
• 상속: 스타일의 일관성을 유지
• 중첩 선택자: CSS 구조를 더 명확하게 표현

(2) 가장 널리 사용되는 CSS 전처리기

• Sass/SCSS: 가장 오래되고 활발히 개발되고 있으며, 가장 많은 사람들이 선택한 라이브러리
• Less: 브라우저에 내장된 JS 인터프리터만으로 컴파일 가능하여 의존성에서 자유로움
• Stylus: 상대적으로 프로그래밍 언어의 특징을 많이 포함하고 있음

(3) 작동 방식
전처리기의 양식에 맞게 파일을 작성 → 실행 전에 처리 과정을 거침 → 브라우저가 읽을 수 있는 일반 CSS 파일로 변환

(4) 장점

• 코드 재사용성 향상: 변수와 믹스인을 통해 반복 작업 감소
• 유지보수 용이: 코드를 여러 파일로 나눠 관리할 수 있음
• 가독성 향상: 중첩 선택자를 통해 CSS 구조를 더 명확하게 표현
• 개발 시간 단축: 프로그래밍적 접근으로 효율적인 스타일 관리
• 일관된 디자인: 변수를 통해 테마 관리 용이

(5) 단점

• 전처리기를 위한 도구 필요: 컴파일 과정이 필요하며 때로는 느릴 수 있음
• 학습 곡선: 새로운 문법과 개념을 배워야 함
• 디버깅 어려움: 컴파일된 CSS와 원본 코드 간의 차이로 인한 디버깅 문제

2.Sass와 SCSS의 구분

Sass와 SCSS는 모두 CSS 전처리기인 Sass(Syntactically Awesome Stylesheets)의 두 가지 문법 형식이다. SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다. 예를 들어 Sass는 들여쓰기를 사용하고, SCSS는 중괄호와 세미콜론을 사용하는 식이다. Sass와 SCSS 이외에도 Less, postCSS, stylus와 같은 전처리기가 있다.

강의를 듣거나 개인이 사용한 후기를 보다보면 실제로는 SCSS를 사용하지만 호칭은 Sass로 하는 것과 같은 혼용이 많다. 레퍼런스 강의 또한 Sass를 사용한다고 하지만 파일의 확장자명은 SCSS를 입력하고 있다.