자몽톡과 더덕마켓 클론 코딩으로 배우는 Sass

베타리더 후기 vii
시작하며 x
이 책에 대하여 xii

PART I Sass 시작하기
CHAPTER 1 Sass를 소개합니다 3
1.1 CSS 전처리기 3
1.2 Sass를 사용해야 하는 이유 5
__1.2.1 낮은 진입 장벽 5
__1.2.2 유용한 기능과 안정성 5
__1.2.3 Sass 라이브러리와 확장 5
1.3 Sass 작동 원리 6
__1.3.1 명령행 인터페이스 7
__1.3.2 프로젝트에 Sass 도입 시 주의할 점 8
1.4 Sass의 두 가지 문법 8
요약 9

CHAPTER 2 Sass 설치하기 10
2.1 웹브라우저와 코드 에디터 10
__2.1.1 웹브라우저 설치 10
__2.1.2 코드 에디터 설치 12
2.2 비주얼 스튜디오 코드 확장 기능 Live Sass Compiler 15
__2.2.1 Live Sass Compiler 설치하기 15
__2.2.2 Live Sass Compiler 사용하기 19
2.3 Sass 설치하기 25
__2.3.1 Sass 설치하기 25
__2.3.2 Sass 명령어 사용하기 34
__2.3.3 Sass 설치 및 테스트를 마치며 38
요약 38

CHAPTER 3 Sass 기초 40
3.1 주석과 중첩 40
__3.1.1 Sass 주석 40
__3.1.2 Sass 중첩 규칙 42
3.2 상위 선택자 참조와 단축 속성 중첩 46
__3.2.1 상위 선택자 참조 46
__3.2.2 상위 선택자와 결합하지 않고 치환만 하는 경우 48
__3.2.3 네임스페이스 중첩 50
3.3 변수 51
__3.3.1 CSS 변수와 Sass 변수 비교 52
__3.3.2 Sass 변수는 언제 어떻게 사용할까? 54
3.4 믹스인 55
__3.4.1 믹스인 사용법 55
__3.4.2 믹스인 호출 시 인수 전달하기 57
__3.4.3 믹스인 기본 인수 설정하기 60
__3.4.4 믹스인 콘텐츠 블록 62
3.5 Sass 함수 65
__3.5.1 함수 사용법 65
__3.5.2 매개변수 사용법에 따른 함수의 형태 68
__3.5.3 가변 인수 70
3.6 @extend 지시자 71
__3.6.1 @extend 사용법 71
__3.6.2 유령 스타일 블록 만들기 73
__3.6.3 믹스인과의 비교 75
3.7 @debug 지시자와 값 78
__3.7.1 @debug 지시자 78
__3.7.2 숫자와 문자열 80
__3.7.3 리스트와 맵 82
__3.7.4 불리언과 null 85
요약 87

CHAPTER 4 Sass 고급 88
4.1 제어문 88
__4.1.1 @if 조건문 89
__4.1.2 @while 반복문과 @for 반복문 93
__4.1.3 @each 반복문 96
4.2 모듈화 99
__4.2.1 @import 지시자 99
__4.2.2 @import 사용법 100
4.3 미디어 쿼리 102
__4.3.1 Sass 미디어 쿼리 102
__4.3.2 Sass 문법을 활용한 미디어 쿼리 103
4.4 빌트인 모듈 106
__4.4.1 sass:list 106
__4.4.2 sass:map 107
__4.4.3 sass:math 108
__4.4.4 sass:string 109
요약 109

PART II Sass를 이용한 클론 코딩 프로젝트
CHAPTER 5 자몽톡 클론 코딩 113
5.1 자몽톡 만들기 113
5.2 프로젝트 구조 만들기 117
__5.2.1 프로젝트 폴더 생성 117
__5.2.2 Sass 파일 구조 자세히 살펴보기 118
5.3 프로젝트 진행 121
__5.3.1 로그인 페이지 만들기 121
__5.3.2 내비게이션 바 만들기 129
__5.3.3 헤더 바 만들기 133
__5.3.4 채팅 미리 보기 만들기 137
__5.3.5 폰트어썸 사용하기 143
__5.3.6 폰트어썸 아이콘 추가하기 148
__5.3.7 채팅 추가하기 154
__5.3.8 채팅 입력 폼 추가하기 160

CHAPTER 6 더덕마켓 클론 코딩 164
6.1 아르바이트 구인 서비스 페이지 만들기 164
6.2 프로젝트 구조 만들기 167
__6.2.1 프로젝트 폴더 생성 167
__6.2.2 Sass 파일 생성 및 임포트 168
6.3 프로젝트 진행 169
__6.3.1 페이지 헤더 만들기 169
__6.3.2 정보 섹션 만들기 177
__6.3.3 구인공고 섹션 만들기 180
__6.3.4 배너 만들고 메인 콘텐츠 마무리하기 186
__6.3.5 페이지 푸터 만들기 190

APPENDIX A Sass 문법과 유사한 모던 CSS 기능 385
A.1 중첩 규칙 198
A.2 함수 200
A.3 조건문 204
마치며 205

찾아보기 207

Sass 스타일 문서는 CSS로 선언할 수 있는 모든 스타일을 포함할 수 있습니다. 심지어 Sass가 지원하는 추가 문법을 전혀 사용하지 않고, 오로지 기존 CSS 코드만으로 Sass 문서를 작성한다고 해도 전혀 문제가 되지 않습니다(물론 그렇게까지 할 이유는 없습니다). Sass만을 위해서 만들어진 새로운 스타일 속성이나 속성값은 없습니다. Sass는 단지 CSS의 선택자, 스타일 속성, 속성값을 다양하고 편리한 문법적 요소를 이용해 작성할 수 있도록 도와줄 뿐입니다. 따라서 CSS에 어느 정도 익숙한 개발자라면, 능숙하게 Sass를 사용할 수 있게 되기까지 그리 오랜 시간이 걸리지 않을 것입니다.

프로그래밍 언어를 하나라도 다루어본 경험이 있다면 Sass의 믹스인을 보고 ‘믹스인은 마치 함수 같네’라는 느낌을 받았을 것입니다. 재미있는 사실은, Sass가 믹스인과 구분되는 별개의 기능으로써 함수를 지원하고 있는 것입니다. @function 지시자를 이용해 정의할 수 있는 Sass의 함수는 믹스인과 어떻게 다른 걸까요? / 함수를 정의하기 위해서는 @function 지시자와 함수의 이름, 그리고 함수의 기능이 필요합니다. 언뜻 보기에 함수의 정의 형태는 믹스인의 정의 형태와 크게 다르지 않아 보입니다. 그러나 둘 사이에는 믹스인이 스타일 블록을 반환하는 것과 달리, 함수는 @return 지시자를 통해 속성값을 반환한다는 결정적인 차이가 존재합니다.