12
One Week Project SASS [email protected]

Sass 공부하기 slidshare

Embed Size (px)

Citation preview

Page 1: Sass 공부하기 slidshare

One Week Project

SASS

[email protected]

Page 2: Sass 공부하기 slidshare

SASS 무엇일까 ?

SASS 예제

SASS 사용방법

다음에 할 일

순서

Page 3: Sass 공부하기 slidshare

Html Css Less Sass

Javascript Jquery Node.js Json Ajax

Bootstrap

Page 4: Sass 공부하기 slidshare

반응형을 지원하는 레퍼런스 사이트를 분석 중 ,많은 사이트가 SASS( 혹은 less) 를 사용하고 있었다 .

도대체 SASS 가 무엇이길래 ?

Page 5: Sass 공부하기 slidshare

CSS 는 HTML 을 디자인하는 언어다 . 태그를 선택하고 , 선택된 태그를 꾸며주는

단순한 원리를 가지고 있다 .

하지만 규모가 조금만 커져도 CSS 유지보수하는 것은

어렵거나 불가능할 수준이다 .

자바스크립트와 같은 동적인 언어는 변수나 함수를 이용해서

코드의 재활용성을 높이고 코드의 양을 줄여주는데 반해서 CSS 는 그러지 못하다 .

SASS 가 무엇인가 ?

Page 6: Sass 공부하기 slidshare

위에서 언급한 CSS 의 단점을 보완하기 위한 기술로 , SASS 자체를 그대로 사용할수는 없고 ,

SASS 의 문법에 맞게 SASS 파일을 만든 후컨버터를 이용해서 CSS 를 생성하면 된다 .

SASS 가 무엇인가 ?

Page 7: Sass 공부하기 slidshare

Style.css

Style.scss

예제

Page 8: Sass 공부하기 slidshare

http://sass-lang.com/SASS 설치 , SASS 배우기 , SASS Documentation 제공

SASS 가 무엇인가 ?

Page 9: Sass 공부하기 slidshare

SASS 컴파일러 : SASS 의 포맷으로 만들어진 파일을 CSS 로 변환해주는 도구

1. http://rubyinstaller.org/ 에 방문해서 ruby 를 설치 (Windows 만 해당 )

2. 커맨드 창이나 터미널 창에서 gem install sass 를 입력 해서 컴파일러를 설치한다 .

SASS 사용하기

Page 10: Sass 공부하기 slidshare

SASS 사용하기

sass --watch sassTest.scss:sassTest.css

Page 11: Sass 공부하기 slidshare

기존의 css 로 프로젝트를 진행된 상황에서 SASS 를 적용하는 방법 http://css2sass.herokuapp.com/

SASS 가 사용하기

Page 12: Sass 공부하기 slidshare

NestingParent references

VariablesOperation and Function

InterpolationMixins

Arguments@import

다음에 할 일