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