Upload
sang-hun-lee
View
81
Download
1
Embed Size (px)
Citation preview
SASS 무엇일까 ?
SASS 예제
SASS 사용방법
다음에 할 일
순서
Html Css Less Sass
Javascript Jquery Node.js Json Ajax
Bootstrap
반응형을 지원하는 레퍼런스 사이트를 분석 중 ,많은 사이트가 SASS( 혹은 less) 를 사용하고 있었다 .
도대체 SASS 가 무엇이길래 ?
CSS 는 HTML 을 디자인하는 언어다 . 태그를 선택하고 , 선택된 태그를 꾸며주는
단순한 원리를 가지고 있다 .
하지만 규모가 조금만 커져도 CSS 유지보수하는 것은
어렵거나 불가능할 수준이다 .
자바스크립트와 같은 동적인 언어는 변수나 함수를 이용해서
코드의 재활용성을 높이고 코드의 양을 줄여주는데 반해서 CSS 는 그러지 못하다 .
SASS 가 무엇인가 ?
위에서 언급한 CSS 의 단점을 보완하기 위한 기술로 , SASS 자체를 그대로 사용할수는 없고 ,
SASS 의 문법에 맞게 SASS 파일을 만든 후컨버터를 이용해서 CSS 를 생성하면 된다 .
SASS 가 무엇인가 ?
Style.css
Style.scss
예제
http://sass-lang.com/SASS 설치 , SASS 배우기 , SASS Documentation 제공
SASS 가 무엇인가 ?
SASS 컴파일러 : SASS 의 포맷으로 만들어진 파일을 CSS 로 변환해주는 도구
1. http://rubyinstaller.org/ 에 방문해서 ruby 를 설치 (Windows 만 해당 )
2. 커맨드 창이나 터미널 창에서 gem install sass 를 입력 해서 컴파일러를 설치한다 .
SASS 사용하기
SASS 사용하기
sass --watch sassTest.scss:sassTest.css
기존의 css 로 프로젝트를 진행된 상황에서 SASS 를 적용하는 방법 http://css2sass.herokuapp.com/
SASS 가 사용하기
NestingParent references
VariablesOperation and Function
InterpolationMixins
Arguments@import
다음에 할 일