기존 CSS의 기능을 향상시키는 강력한 CSS 전처리기인 SCSS(Sassy CSS)를 마스터하기 위한 종합 가이드인 “SCSS”에 오신 것을 환영합니다. 이 책은 SCSS의 기본을 이해하는 것부터 실제 프로젝트에 고급 기능을 적용하는 것까지 안내합니다. 스타일링 프로세스를 간소화하고자 하는 웹 개발자이든 CSS 전처리기를 처음 접하는 사람이든 이 책은 모든 단계를 안내합니다.

1장, 'SCSS 소개'에서는 SCSS에 대한 기본적인 개요로 시작하여 SCSS의 정의와 CSS의 기능을 확장하는 방법을 설명합니다. SCSS가 더 많은 유연성과 효율성을 제공하는 방법을 포함하여 CSS와 SCSS의 주요 차이점을 살펴봅니다. 또한 이 장에서는 웹 개발 프로젝트에서 SCSS를 사용할 때의 이점을 간략하게 설명하여 더 깊이 있게 학습할 수 있는 발판을 마련합니다.

2장, '환경 설정'에서는 SCSS를 시작하기 위한 필수 사항을 다룹니다. SCSS 컴파일러를 설치하고, SCSS를 인기 있는 통합 개발 환경(IDE)과 통합하고, HTML 프로젝트에 SCSS를 통합하는 방법을 배웁니다. 이 장을 통해 SCSS 코드 작성 및 컴파일을 위한 탄탄한 기초를 다질 수 있습니다.

3장, 'SCSS의 기본 구문과 구조'에서는 SCSS의 핵심 구문과 구조 요소를 소개합니다. SCSS 변수, 보다 깔끔한 코드 구성을 위한 중첩 규칙, 스타일시트를 효과적으로 관리하기 위해 파일을 가져오는 방법, 코드를 문서화하는 주석 사용에 대해 배웁니다.

4장, 'SCSS의 상호 작용'에서는 SCSS의 더 많은 대화형 기능을 살펴봅니다. 이 장에서는 SCSS 내에서 수행할 수 있는 작업, 재사용 가능한 코드 조각을 위한 믹스인 생성 및 사용, 보다 동적이고 유지 관리가 쉬운 스타일을 만들 수 있는 함수에 대해 다룹니다.

5장, '고급 SCSS 기능'에서는 고급 SCSS 기능을 살펴봅니다. 조건문과 루핑을 사용하여 보다 동적이고 적응력이 뛰어난 스타일시트를 만드는 방법과 @extend 키워드를 사용하여 프로젝트 전체에서 스타일을 효율적으로 재사용하는 방법을 배웁니다.

6장, 'SCSS의 실제 사용 사례'에서는 최신 웹 디자인에서 SCSS의 실제 적용 사례를 보여줍니다. 이 장에서는 반응형 디자인을 위한 믹스인 사용, 그라데이션 배경 만들기, 애니메이션 구현 등의 예제를 통해 SCSS를 통해 정교한 스타일링 기법으로 프로젝트를 향상시킬 수 있는 방법을 보여줍니다.

7장, 'SCSS의 모범 사례 및 규칙'에서는 깔끔하고 체계적이며 효율적인 SCSS 코드를 유지하는 데 중점을 둡니다. 파일과 폴더를 정리하는 모범 사례를 살펴보고, 명명 규칙을 준수하여 일관성을 유지하고, SCSS 린팅을 활용하여 스타일시트에서 잠재적인 문제를 파악하고 수정하는 방법을 알아봅니다.

8장, 'SCSS 문제 해결 및 디버깅'에서는 일반적인 SCSS 오류 해결 및 디버깅 기술에 대한 지침을 제공합니다. 브라우저에서 SCSS를 검사하고 디버깅하는 방법을 배워 스타일시트의 문제를 효율적으로 식별하고 수정하는 데 도움이 됩니다.

9장, 'SCSS를 CSS로 변환하기'에서는 SCSS를 표준 CSS로 변환하는 과정을 다룹니다. 이 장에서는 SCSS 컴파일을 자동화하고 프로덕션 프로젝트에 SCSS를 배포하여 SCSS 코드가 웹에 맞게 적절하게 변환되고 최적화되도록 하는 방법을 설명합니다.

10장, '추가 리소스'에서는 SCSS 기술을 향상시킬 수 있는 추가 리소스를 살펴보며 마무리합니다. 워크플로우를 간소화할 수 있는 인기 있는 SCSS 라이브러리를 살펴보고 기존 CSS 코드를 SCSS로 변환하여 고급 기능을 활용하는 방법을 배웁니다.

이 책을 마치면 기본 구문부터 고급 기능까지 SCSS를 완전히 이해하고 웹 개발 프로젝트에서 SCSS를 효과적으로 구현할 수 있는 실무 기술을 갖추게 될 것입니다. 이제 SCSS의 세계로 뛰어들어 스타일링 역량을 한 단계 업그레이드할 수 있는 잠재력을 최대한 발휘해 보세요.

1장 : SCSS 소개
___1. SCSS란?
___2. CSS와 SCSS의 차이점
___3. SCSS 사용의 장점
2장 : 환경 설정하기
___1. SCSS 컴파일러 설치하기
___2. SCSS와 IDE 통합하기
___3. HTML 프로젝트에서 SCSS 사용
3장 : SCSS의 기본 구문 및 구조
___1. 변수
___2. 중첩 규칙
___3. 파일 가져오기
___4. 주석
4장 : SCSS의 상호 작용
___1. SCSS의 작업
___2. 믹스인
___3. 함수
5장 : 고급 SCSS 기능
___1. 조건부
___2. 루핑
___3. 키워드 확장
6장 : SCSS의 실제 사용 사례
___1. 믹스인을 사용한 반응형 디자인
___2. 그라디언트 배경 만들기
___3. SCSS를 사용한 애니메이션
7장 : SCSS의 모범 사례 및 규칙
___1. 파일 및 폴더 정리하기
___2. 이름 지정 규칙
___3. SCSS 린팅
8장 : SCSS 문제 해결 및 디버깅 9.
___1. 일반적인 SCSS 오류
___2. 브라우저에서 검사 및 디버깅하기
9장 : SCSS를 CSS로 변환하기
___1. SCSS 컴파일 자동화
___2. 프로덕션 프로젝트에 SCSS 배포하기
10장 : 추가 리소스
___1. 인기 있는 SCSS 라이브러리
___2. CSS를 SCSS로 변환하기