처음 시작하는 Sass: CSS의 한계를 뛰어넘는 Sass를 만나다

131 처음시작하는 Sass CSS 의한계를뛰어넘는 Sass 를만나다 김유리, 방지은, 양주희, 정대영, 홍보라지음

131 처음시작하는 Sass CSS 의한계를뛰어넘는 Sass 를만나다 김유리, 방지은, 양주희, 정대영, 홍보라지음

표지사진최현수이책의표지는최현수님이보내주신풍경사진을담았습니다. 리얼타임은독자의시선을담은풍경사진을책표지로보여주고자합니다. 사진보내기 ebookwriter@hanbit.co.kr 처음시작하는 Sass CSS 의한계를뛰어넘는 Sass 를만나다 초판발행 2016 년 6 월 16 일 지은이김유리, 방지은, 양주희, 정대영, 홍보라 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 6월 24일제10-1779호 ISBN 978-89-6848-823-8 95000 / 정가 12,000원 총괄전태호 / 책임편집김창수 / 기획 편집김상민디자인표지 / 내지여동일, 조판금미향마케팅박상용, 송경석, 변지영 / 영업김형진, 김진불, 조유미 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 www.hanbit.co.kr / 이메일 ask@hanbit.co.kr Published by HANBIT Media, Inc. Printed in Korea. Copyright c 2016 김유리, 방지은, 양주희, 정대영, 홍보라 & HANBIT Media, Inc. 이책의저작권은김유리, 방지은, 양주희, 정대영, 홍보라와한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전제를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanbit.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.

저자소개 지은이 _ 김유리 평범한일상속낭만을꿈꾸는프론트엔드개발자입니다. 현재 NHN Technology Services에서근무하고, 사내교육강사로도활동하면서누군가에게도움이된다는것에굉장히보람을느끼고있습니다. 사용자에게친절한개발자가되는것을목표로언제나긍정적인자세로새로운 UI를구현하기위해삽질을즐기며연구하고있습니다. 지은이 _ 방지은 현재 NHN Technology Services UIT 개발실에서프론트엔드개발자로일하고 있습니다. 카페라떼를사랑합니다. 지은이 _ 양주희 현재 NHN Technology Services UIT 개발실에서프론트엔드개발자로일하고 있습니다. 웹킷 CSS 바이블 : 실무편, 웹킷 CSS 바이블 : 레퍼런스편 ( 한빛미디어, 2015) 집필에참여하였으며, 새로운기술을사용하는데큰즐거움을느낍니다. 저자소개 _ 3

지은이 _ 정대영 프론트엔드개발자로 < 네이버선거특집페이지 >, < 런던올림픽 >, < 오늘의신문 >, < 네이버톡 > 등다수의프로젝트를진행했습니다. 교육, 세미나, 컨벤션작업등다양한방법으로동료들에게도움이될수있는활동에보람을느끼며일하고있습니다. 항상힘이되어주는와이프에게감사합니다. 지은이 _ 홍보라 새롭고신기한코드를갈구하는개발자입니다. NHN Technology Services에서프론트엔드개발자로일하고있습니다. 모든커피를사랑합니다. 4 _ 저자소개

저자서문 문서를꾸미는보조역할을하던 CSS는시간이지날수록웹개발에서중요한역할을차지하게됐다. 특히 CSS2 이후오랜공백을깨고 CSS3가등장하면서 CSS를통해더욱많은표현이가능하게된것이큰계기가되었다. 배경이미지를자르고구조를나누어표현했던둥근테두리는속성하나로손쉽게적용할수있게되었으며, JavaScript나서버단에의지했던수많은선택자도 CSS3 이후에는 CSS만으로처리할수있게되었다. 하지만여전히스타일을정의하고속성을적용하는방식은매우단순한수준에머무르고있어, 반복되는코드의입력을줄이려는여타개발언어들과는사뭇다른아쉬움을남기고있다. 특히과거와다르게 CSS의활용범위가커지고웹사이트의규모가거대해지면서 1,000 라인쯤은쉽게넘기는코드가작성되고있으며, 이에따라이코드들을더욱효율적으로관리해야할필요성이강조되고있다. 다행히이러한안타까운현실에서웹개발자를구원해줄한줄기빛이생겨났는데, Sass를필두로좀더편리하고효율적으로 CSS를작성할수있도록도움을주는전처리기들이바로그구원자들이다. 그가운데서도 Sass는가장큰인기를얻고있으며많은웹개발자의찬사를받고있다. 물론새로운개념을받아드리기는언제나쉽지않지만, 새로움을위한도전에이책이반드시도움되리라생각한다. 필자는동료들가운데비교적먼저 Sass를사용했고, 많은입문자를가이드해주고지켜보았다. 대부분처음에는두려움으로시작하지만, 어느정도숙련도가높아지면공통으로하는이야기가있다. Sass를줄곧활용하다가끔기존 CSS로작업하는업무를진행하면너무나불편하고코드를작성하는게비효율적이라는것이다. 이책의독자들도지금은낯설고두려울수있지만, 이책을완독한뒤에는 Sass가없는개발환경은생각하기조차싫을것이라고확신한다. _ 집필진대표정대영 저자서문 _ 5

차례 chapter 1 이해하기 10 1.1 CSS 전처리기 10 1.1.1 Sass 11 1.1.2 Less 11 1.1.3 Stylus 12 1.2 Sass 살펴보기 13 1.2.1 Ruby 기반의 Sass 13 1.2.2 기존문법과의호환성 13 1.2.3 Sass와 SCSS 14 1.2.4 프레임워크 15 1.3 Sass에대한오해 15 chapter 2 설치하기 18 2.1 컴파일러설치하기 18 2.1.1 Sass 컴파일러 18 2.1.2 Window에서설치하기 18 2.1.3 Mac 또는 Linux에서설치하기 24 2.2 컴파일해보기 25 2.2.1 기본테스트환경준비하기 26 2.2.2 컴파일해보기 26 2.3 컴파일옵션 28 2.3.1 --watch 28 2.3.2 --style 32 2.3.3 --sourcemap 35 2.3.4 --cache 39 2.4 에디터에서바로컴파일하기 39 2.4.1 Sublime Text 설치하기 40 6 _ 차례

2.4.2 Sublime Text 플러그인설치하기 41 2.4.3 Sublime Text에서 Sass 관련 Package 설치및컴파일해보기 44 2.5 컴파일방법소개 46 2.5.1 컴파일 Tool 47 2.5.2 Grunt 플러그인 48 2.6 LibSass 49 chapter 3 시작하기 50 3.1 파일관리 50 3.1.1 @import 50 3.1.2 파일분할 52 3.1.3 디렉터리구조 53 3.2 주석 55 3.3 중첩 56 3.3.1 중첩규칙 57 3.3.2 부모선택자참조 (&) 57 3.3.3 속성의중첩 60 3.3.4 중첩된 @import 61 3.3.5 중첩제한 61 chapter 4 본격적으로사용하기 64 4.1 변수 $ 64 4.1.1 변수알아보기 64 4.1.2 지역변수와전역변수 66 4.1.3 플래그 68 4.1.4 interpolation: #{ } 69 4.1.5 List 70 차례 _ 7

차례 4.1.6 Map 71 4.2 Mixin 72 4.2.1 Mixin 알아보기 72 4.2.2 인자 74 4.2.3 @content 78 4.3 @extend 80 4.3.1 @extend 알아보기 80 4.3.2 extend의한계 86 chapter 5 마스터하기 88 5.1 연산 88 5.1.1 연산자의종류 89 5.1.2 숫자 (Number) 91 5.1.3 색상 (Color) 92 5.1.4 문자열 (String) 93 5.1.5 불 (Boolean) 95 5.2 제어문 95 5.2.1 조건문 @if 96 5.2.2 반복문 @for 101 5.2.3 반복문 @each 104 5.2.4 조건문 + 반복문 @while 111 5.3 함수 112 5.3.1 @function 112 5.3.2 자주사용하는 Sass 함수 115 5.4 기타 118 5.4.1 @media 118 5.4.2 @at-root 120 5.4.3 @debug, @warn, @error 123 8 _ 차례

chapter 6 Compass 130 6.1 Compass 소개 130 6.2 Compass 설치하기 130 6.2.1 Compass 설치하기 130 6.2.2 Compass 프로젝트생성하기 131 6.2.3 Compass 컴파일 134 6.3 Compass 사용하기 135 6.3.1 CSS3 Module 135 6.3.2 Helper 138 6.4 Sprite 자동생성기능사용하기 139 6.4.1 기본테스트환경준비하기 140 6.4.2 Sprite 자동생성하기 140 차례 _ 9

chapter 1 이해하기 1.1 CSS 전처리기 반복되는코드의복잡함에서우리를구원해줄 Sass 가어떤방식으로우리에게 도움을주는지알아보자. CSS 전처리기 preprocessor 는변수, 함수, 상속등의일반적인프로그래밍개념을사 용하여코드를작성한뒤기존 CSS 문법으로컴파일해주는방식을취한다. 그리 고이러한컴파일방식때문에별도의언어가아닌전처리기라고부르게됐다. 예를들어 Sass 는 Sass 문법에맞추어 chocolate.scss 파일을작성한뒤컴파 일명령어를통해브라우저가이해할수있는 chocolate.css 가컴파일되는방 식이다. [ 그림 1-1] 컴파일과정 chocolate.scss (Sass 문법 ) Sass 전처리기 ( 컴파일 ) chocolate.css (CSS 문법 ) 이렇게나타난전처리기로는 Sass, Less, Stylus 가있으며, 지금부터전처리기 각각의특징을비교해서살펴보자. 10 _ 처음시작하는 Sass

1.1.1 Sass 가장역사가오래된전처리기다. Ruby 언어를기반으로구동된다. Ruby 언어가지닌한계로파일이길어지면컴파일이다소느리다. C로포팅된 Libass는상당히빠른컴파일속도를제공하나 Sass의업데이트반영이느리다는단점이있다. 상대적으로다양한기능을제공하며계속해서새로운기능들이추가되고있다. CSS3, ImageSprite 처리등의부가적인기능들을제공하는 Compass를사용할수있다. IDE( 에디터 ) 를잘지원하고있다. [ 코드 1-1] Sass 예제코드 Sass $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS body { font: 100% Helvetica, sans-serif; color: #333; } 1.1.2 Less Twitter의 Bootstrap에서사용되어널리알려졌다. JavaScript(Node.js) 를기반으로구동된다. 클라이언트단 ( 브라우저 ) 에서자바스크립트파서 parser 를통해실행된다. AJAX 콜을사용하기때문에로컬환경에서도웹서버설정이필요하다. Internet Explorer 9 이상에서만적용되며반응속도가다소느린단점이있다. 다른전처리기와같이 Simpless, Less Parser와같은외부컴파일러 (Node.js 기반 ) 를통해컴파일된 CSS를컴파일해사용할수도있다. 초창기에는 Sass에비해컴파일이빠른것이장점으로꼽혔으나 Sass가캐쉬를적용한뒤부터큰차이가없어졌다. 1 이해하기 _ 11

[ 코드 1-2] Less 예제코드 Sass 와 Stylus 에비해다소기능이부족하다는평가가있다. IDE 도플러그인등을통해잘지원하고있다. Less @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } CSS #header { color: #6c94be; } 1.1.3 Stylus 가장나중에발표된전처리기다. JavaScript(Node.js) 기반으로구동된다. 기본적인 CSS 문법에많은변화를주었다..styl 파일을사용하면표준 CSS 문법도사용할수있으며, 콜론, 세미콜론, 중괄호등을입력하지않아도문제없이컴파일된다. 지나치게관대한문법을적용하고있어어떤기호도사용하지않고작성된소스코드를접하게되면소스코드파악이어려운경우가있다. 가장늦게발표된전처리기지만, 많은기능이구현되어있어 Sass와기능상으로는큰차이가없다는평가를받고있다. 하지만완성도가낮아여러작은버그가존재한다. [ 코드 1-3] Stylus 예제코드 Stylus border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px) 12 _ 처음시작하는 Sass

1.2 Sass 살펴보기 앞서전처리기들을비교하면서 Sass 에대해서도간단히살펴보았지만, 여기서앞 으로공부하게될 Sass 의특징들에대해좀더자세히살펴보자. 1.2.1 Ruby 기반의 Sass Sass의특징가운데가장독특한부분은 Ruby 언어를기반으로동작한다는것이다. 이때문에생기는두가지단점이있는데, 그중첫번째는사용자에게설치과정부터부담을준다는것이다. 하지만여기서는해당설치과정을윈도와맥두가지환경모두단계별로학습할수있도록안내하고있으니걱정하지않아도된다. 두번째는속도문제다. Ruby 언어가가지는한계로파일이다소길어지면컴파일속도가조금씩지연된다는점인데, 1~2초정도의시간이지만수시로수정사항을적용하면서작업을진행하하기때문에누적되면다소부담이되기도한다. 이러한단점을극복하기위해 C로이식된 Sass인 Libsass를사용하기도하지만, 최신 Sass의업데이트내용이 Libsass에반영되기까지시간이걸리며, Compass를사용할수없다는또다른단점이발생한다. 1.2.2 기존문법과의호환성 Sass가인기를얻게된가장큰이유는강력한기능제공과기존문법과의호환성때문이다. 몇몇전처리기는 CSS를단순히보강한수준의기능만을제공하지만, Sass는좀더완성도높은프로그래밍언어처럼동작하게한다. 선택자를손쉽게입력할수있게해주는기본적인기능부터 Sass 스크립트라고불리는함수및제어문까지제공한다. 1 이해하기 _ 13

[ 코드 1-4] SCSS 코드 SCSS @mixin rounded ($radius: 10px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } @for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; } } 1.2.3 Sass 와 SCSS Sass는 Sass와 SCSS(Sassy CSS) 두가지문법을제공한다. 처음입문하는독자에게이두가지문법이혼란을일으킬수도있는데지금부터각각의차이를찬찬히살펴보자. Sass도초기에는 Haml 1 의영향으로더편리한개발을위해중괄호와세미콜론등을사용하지않는 Ruby 언어스타일의간략한문법을제공했다. 하지만기존 CSS 문법과지나치게달라서 3.0 버전부터기존 CSS의문법을확장해주는개념의 SCSS를메인문법으로제공하게된다. 기존 CSS 문법을그대로포함하기때문에 CSS 로작성된프로젝트를 SCSS 로전 환하는것에서도문제가없고, 코드를접했을때 Sass 보다좀더쉽게구조를파 악할수있다는점때문에 SCSS 의인기가계속해서늘어나고있다. 두문법의적용은각문법의이름을딴확장자명으로구분하며여기서는 SCSS 만 을설명할것이다. 1 Haml(HTML abstraction markup language): HTML을더쉽게입력하려고개발된 Ruby 언어기반의전처리기. 14 _ 처음시작하는 Sass

[ 코드 1-5] Sass 와 SCSS 문법 Sass.class_name color=!primary-color width= 100% overflow= hidden SCSS.my-element { color: $primary-color; width: 100%; overflow: hidden; } 1.2.4 프레임워크 Sass 기능을확장하는프레임워크로 Compass 2, Bourbon 3 이있다. 유용한 mixin 등을제공하며, 스프라이트이미지도손쉽게관리할수있도록도와준다. Compass에비해 Bourbon은다소생소할수도있는데, 플러그인형태로확장기능을제공한다는점은동일하다. 대체로 Compass는강력하고다양한기능을제공하는반면다소무겁고, 반대로 Bourbon은기능은부족하지만잘만들어진 mixin 라이브러리정도의느낌으로가볍다. 1.3 Sass 에대한오해 Sass 를처음입문하거나아직접해보지않은사람들에게반복적으로받는질문이 있는데, 여기서는 Sass 에대한몇가지오해를집고넘어가려고한다. Q. 저는제어문, 함수등의개념이없어사용하기어려울것같아요. Sass 입문을망설이게하는가장큰이유는평소프로그래밍로직에대한개념이부족한사람들이가지는프로그래밍에대한막연한두려움이다. CSS에는없았던다양한기능을제공하기에기능들을이해하기벅차지않을까하는두려움이생기 2 http://compass-style.org/ 3 http://bourbon.io/ 1 이해하기 _ 15

는것이사실이다. 하지만 SCSS의경우기존에우리가익숙한 CSS 문법을온전히포함하고있기때문에기존 CSS 문법을베이스로중첩 nesting, 변수, mixin, @import 등의비교적쉬운기능을시작으로점차고급기능까지단계적으로추가하며사용한다면자연스럽게마스터할수있으니걱정하지않아도좋다. Q. 기존에이미 CSS로작업한프로젝트라서적용하기가어려워요. 앞선오해와마찬가지로기존 CSS 문법을온전히포함하고있기에기존 CSS 코드를 SCSS로변환하는것은전혀문제가없다. 기존에작성된 CSS 코드를그대로복사해붙여넣은후 SCSS 문법을추가로사용하면된다. Q. Sass로생성한 CSS를봤더니불필요한코드가너무많아요. Sass를포함한전처리기들은 CSS를좀더편리하게작성하기위한도구일뿐이다. 결국전처리기들은약속된문법을통해 CSS 코드를만들어내게되는데, 본인이작성한 Sass 문법이 CSS 코드를더욱완성도있게만들어낸다는개발자관점의사고가개발과정에조금포함된다면, 전처리기를사용한다고해서불필요한코드가추가되는것이아님을쉽게파악할수있다. Q. 추후 Sass를모르는담당자로바뀌면어떡하죠? 개인프로젝트가아닌이상본인이진행한프로젝트를다른사람이유지보수하는경우가생기게된다. 이를염두에두고추후 Sass를모르는후임자가유지보수를하지못하는경우를걱정해 Sass 도입을주저하는경우를많이볼수있다. 하지만작성된 Sass 코드가아까울순있지만, Sass가컴파일한 CSS 코드가존재하기때문에후임자는컴파일된 CSS를가지고유지보수를이어갈수있어문제가되지않는다. 16 _ 처음시작하는 Sass

Q. 설치가어려워요. 앞서 Sass의특징에대해설명할때도언급했지만 Ruby 언어환경에익숙하지않은사람들은다소설치과정이복잡하게느껴질수도있다. 하지만초기설치과정만잘넘긴다면사용에는큰어려움이없으며, 본도서에서설치과정에대해자세히소개할예정이니걱정하지말자. 주의 Sass를사용할때가장주의해야할부분은바로남용이다. 손쉽게선택자중첩을늘릴수있어과도하게깊은중첩상태의선택자를만들어내기도한다. 특히특별한목적없이 mixin이나변수처리를남발하게되면오히려가독성이떨어지고유지보수를힘들게하는코드를만들어내기도쉽다. 모든도구는적절하게사용될때가치가높아진다는것을명심하자. 1 이해하기 _ 17