추가 적립 안내

웹 개발에서 CSS의 비중이 커짐에 따라 코드는 반복되고 스타일시트는 길고 복잡해지며 용량도 커지고 있다. 여기저기 흩어져 있는 코드를 찾고 수정하는 데 많은 시간을 소요하지만 코드를 관리하는 것은 점점 어려워지고 시간이 지날수록 효율성도 떨어진다. 이런 문제를 해결해주는 것이 바로 Sass다!
이 책은 Sass는 무엇인지, 이를 작업에 어떻게 적용하여 사용할 수 있는지, 더 나아가 반응형이면서 고해상도를 지원하는 웹사이트를 구축하는 데 Sass를 어떻게 사용하고, 용량이 방대한 코드를 어떻게 수월하게 유지보수할 수 있는지 등을 다룬다. Sass를 처음 접하는 독자의 눈높이에서 복잡하고 어려운 Sass의 용어와 문법을 기초부터 고급 기술까지 쉽게 풀어서 설명한다. Sass는 여러분이 작업하는 스타일시트의 수준을 높여줄 것이다.

SASS의 기초부터 고급 기술까지!
실무에 바로 사용할 수 있는 CSS 전처리기 SASS

CSS는 코드 반복만 있기 때문에 SASS가 필요하다.

CSS를 배우는 것은 솔직히 쉽지 않지만 구조가 단순하고 코드가 반복된다는 특징이 있다. 오늘날 우리는 전보다 더 크고 복잡한 웹사이트를 만들며 브라우저 호환성을 맞추고 반응형 디자인을 적용하는 등 웹 개발에서 CSS를 점점 더 많이 사용하고 있다. 이에 따라 스타일시트 문서의 길이도 점차 길어지고 용량도 커지고 있다. 이렇게 된 주요 원인 중 하나는 코드의 반복이다. 이제 우리는 한 단계 더 올라가야 할 시점에 이르렀다. 관리와 유지보수가 가능한 것을 만들어야 한다. CSS에는 추상화 개념이 없고 코드 반복만 있기 때문에 무엇보다도 추상화가 필요하다.
‘CSS를 확장한 언어’ Sass는 CSS의 부족한 부분을 채워주는 강력한 추상화 도구다. 재사용이 가능한 모듈을 활용하여 생산성을 높이고 압축된 스타일 형식으로 출력 파일을 만들어서 웹사이트 성능도 최적화할 수 있다. 따라서 CSS의 규모가 커지더라도 수월하게 관리하고 유지보수할 수 있다.

멋진 웹사이트를 만들기 위한 SASS

CSS를 다루는 이들에게 전처리기는 필수가 아니지만 해외에서는 관심과 사용도가 높은 편이다. 저자는 Sass를 다루기 망설이는 이들이 우려하는 부분을 세 가지로 정확히 짚고 있다. 루비 언어를 배워야 하고, CSS 작성방식을 바꿔야 하며, 명령행을 사용할 줄 아는 전문가여야 한다. 이 책은 Sass가 이보다 훨씬 간단하고 여러분이 활용하고자 하는 만큼 효과적으로 사용할 수 있다며 오해를 풀어준다.
Sass를 통해 CSS를 간결하게 만들고 늘어만 가던 작업 시간을 줄이기를 바란다. 무엇보다 가장 중요한 점은 멋진 웹사이트를 만드는 것이기 때문이다.

개발자의 삶이 편해지는 SASS

Sass에는 놀랍도록 유익한 기능이 많아서 프런트엔드 개발자의 삶이 편해진다. 이 중 가장 유익한 것으로 ‘변수’를 들 수 있다. 변수는 CSS 문서에서 반복되는 값을 일일이 고치는 엄청난 작업에 걸리는 시간을 단축시켜 유지보수 작업을 훨씬 간편하고 쉽게 만들어준다. 그 다음으로는 믹스인을 들 수 있다. 여러 가지 선언에서 똑같은 규칙을 계속 반복하며 작성하는 것보다 믹스인을 사용하여 단 한 번만 스타일 그룹을 정의하고 필요할 때마다 그것을 참조할 수 있다. Sass는 ‘다량’의 CSS를 매우 가볍게 처리해준다. CSS 그레이디언트를 만들기 위해 그 문법을 외우고 있지는 않은가? 믹스인 하나로 만들 수 있으며 명세가 바뀌더라도 믹스인에서 단 한 번만 문법을 수정하면 된다. Sass는 기대에 충분히 부응할 만큼 효과적이다. 변수와 믹스인 한두 개만으로도 작업은 훨씬 편해질 것이다. 하지만 원한다면 그 이상으로 활용할 수 있다

◆이 책에서 다루는 내용
-Sass를 설정하는 방법
-Sass 문법 작동 방식
-중첩, 변수, 믹스인, @extend를 이용한 핵심 기능 사용법
-반응형이면서 고해상도를 지원하는 프로젝트의 웹사이트를 구축하는 데 Sass를 사용하는 방법
-방대한 용량의 코드를 수월하게 유지보수할 수 있는 방법

한국어판 출간에 앞서
추천의 글
chapter 1 왜 SASS인가?
chapter 2 SASS 워크플로
chapter 3 SASS 사용하기
chapter 4 SASS와 미디어 쿼리
감사의 글
옮긴이의 글
감수자의 글
참고 자료
참고 URL
찾아보기

chapter 1 왜 SASS인가?
Sass는 CSS 전처리기다. 여러분이 작성하는 스타일시트와 브라우저에서 해석할 .css 파일 중간에 위치하는 하나의 계층이다. Sass(Syntactically Awesome Stylesheets)는 하나의 언어로서 CSS의 구멍을 메워주고 DRY 방식을 적용하여 더 빠르고 효율적으로 코드를 작성하고 쉽게 유지보수할 수 있게 해준다.

chapter 2 SASS 워크플로
Sass를 이용하면 여러분은 더 이상 .css 파일을 작업하지 않는다. 대신 아무도 보지 못하는 .scss 파일을 작성할 것이다. Sass의 최종 출력 파일은 여러분이 선호하는 형식과 다를 수 있다. …… 결과적으로 형식의 차이는 아주 사소한 것이다. 결과 파일들은 완벽하게 눈으로 읽을 수 있다.

chapter 3 SASS 사용하기
Sass의 기능은 다양하다. 수많은 파일과 코드가 얽혀 있는 스타일시트를 작성하는 이들의 정신을 안정시키는 매우 효과적인 도구다. Sass에는 원하는 대로 사용할 수 있는 기능이 많지만 그중에서도 웹디자이너에게 가장 가치 있다고 여겨지는 부분을 말하고 싶다. …… Sass에는 놀랍도록 유익한 기능이 많아서 프런트엔드 개발자의 삶이 편해진다.

chapter 4 SASS와 미디어 쿼리
Sass는 기대에 충분히 부응할 만큼 효과적이다. 변수와 믹스인 한두 개만으로도 작업은 훨씬 편해질 것이다. 하지만 원한다면 그 이상으로 활용할 수 있다. 반응형이면서 고해상도를 지원하는 프로젝트의 웹사이트를 구축하는 데 Sass를 어떻게 사용하는지, 용량이 방대한 코드를 어떻게 수월하게 유지보수할 수 있는지 이야기하겠다.