[북리뷰] 자몽톡과 더덕마켓 클론 코딩으로 배우는 Sass 기초부터 실전 프로젝트까지

책은 출판사에 도서 체험단에 선정되어 제공 받았습니다.

​

웹사이트 제작해 보신 분들은 CSS에 대해 익히 알고 계실 것 같습니다.

CSS(Cascading Style Sheets)는

웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다.

 

 

코드가 어렵진 않지만 작업하다보면 성가신 부분이 있습니다.

그리고 여러 사람이 코드를 작서하다 보면 중복이 되고

사용하지 않는 코드도 그냥 두는 경우도 많습니다.

Sass는 CSS를 잘 사용하기 위한 도구입니다.

길고 복잡한 스타일시트를

짧고 간결하게 관리하기 위해 등장한

CSS 전처리기가 바로 Sass입니다.

CSS는 프로그래밍 언어이지만 문법적인 한계가 있는 언어입니다.

파이썬이나 자바와 같은 대중적인 언어들은 조건문, 반복문, 함수 등 유용한 기능을 지원합니다.

그런데 CSS는 이런 기능을 지원하지 않습니다.

이런 CSS의 한계를 확장시켜 주는 것이 Sass입니다.

Sass는 CSS 전처리기로서 Sass 문서와 웹브라우저 사이에서 Sass 문서를 CSS 문서로 컴파일하는 기능을 지원합니다.

위의 그림은 바로 이것을 표시해 준 것입니다.

​

명령은 CUI로 다음과 같이 명령어를 입력하면 됩니다.

Sass style.sass style.css

​

Sass는 들여쓰기와 개행으로 코드 형태가 깔끔합니다.

SCSS는 최신 문법이면서 배우기 쉬운 장점을 갖고 있습니다.

 

비주얼 스튜디오 코드를 설치해야 합니다.

명령형 기반 Sass 설치

 

일반적으로 변수는 대부분의 프로그래밍 언어에서 존재하는 문법 도구입니다.

변수를 사용하는 것을 재사용하기 위함인데요.

CSS에서 사용할 수 없었던 변수가 Sass에서는 가능합니다.

그리고

Sass에서는 변수처럼 개발 속도와 가독성을 향상시켜주는 도구로 믹스인 (Mixins)을 지원합니다.

공통으로 쓰이는 스타일을 @mixin으로 정의하고 @include로 불러와 중복 코드를 줄여줍니다.

저자의 깃허브에 소스가 들어 있어서 사용하기 편리하네요.

아무래도 CSS는 프런트엔드 개발자나 퍼블리셔에게 필요한 기능입니다.

좀 더 차별적인 코딩을 학습해 보고 싶다면 이 책을 추천합니다.

기초부터 시작해서 실전 프로젝트로 만들면서 배우는 Sass, SCSS 입문서 강추네요.

 

 

 

#Sass #SCSS #자몽톡 #더덕마켓 #제이펍