Your SlideShare is downloading. ×
Ускорение frontend-разработки с помощью Haml, Sass, Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ускорение frontend-разработки с помощью Haml, Sass, Compass

2,663

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,663
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ускорение frontend-разработки с помощьюHaml, Sass, Compass
  • 2. Андрей Ситник@andrey_sitnikai@evilmartians.comsitnik.ru
  • 3. Лень, нетерпимость и гордыня
  • 4. 1996 2011HTML, CSS HTML, CSS
  • 5. Мистерияо том, как Haml, Sass и Compassпомогают нам верстатьна реальном примере с groupon.ru
  • 6. Скачайте примерevilmartians.ru/rit2011
  • 7. Haml — язык шаблоновс альтернативным синтаксисом для HTML или XML
  • 8. Шаблон наВеб-сервер Haml HTMLБраузер
  • 9. Поддержка Haml PHP, ASP.Net, Java,Ruby on Rails, Perl, Python
  • 10. !!! 5 <!DOCTYPE html>%html( lang="ru" ) <html lang="ru"> %body <body> #content <div id="content"> %h1.big <h1 class="big"> Заголовок Заголовок </h1> </body> </html>
  • 11. Мистерия 1
  • 12. Sass — препроцессор CSS
  • 13. Compass — набор кошерных инструментов и шаблонов для Sass
  • 14. Начало работы Разработка Деплойcompass create compass watch compass compileСоздаёт файл Следит за изменением Компилируетнастроек с путями с sass-файлов и тут же sass-файлы в CSS,sass- и css-файлам обновляет css-файлы чтобы отдавать пользователям уже готовые css-файлы
  • 15. $width: 100px;@mixin default-font($size = 12px) { font: $size serif;} #content {#content { width: 110px; width: $width + 10px; } h1 { #content h1 { @include default-font(40px); font: 40px serif; } }}
  • 16. Мистерия 2
  • 17. @import compass/css3input { CSS3 @include box-shadow(5px); }input { box-shadow: black 0 0 5px; -webkit-box-shadow: black 0 0 5px; -moz-box-shadow: black 0 0 5px; -o-box-shadow: black 0 0 5px; }
  • 18. Мистерия 3
  • 19. Градиенты@import compass/css3;$experimental-support-for-svg: true;header { @include background(linear-gradient(red, blue)); @include filter-gradient(gray, black);}
  • 20. Мистерия 4
  • 21. data:uribackground: inline-image(icon.png) no-repeat;background: url(data:image/png;base64,iVBORw0KG…) no-repeat;
  • 22. Спрайты$sprite: sprite-map(dir/*.png); /* dir/one.png, dir/two.png */.one { background: sprite($sprite, one); }.two { background: sprite($sprite, two); }.one { background: url(dir-2f78ea.png) 0 0; }.one { background: url(dir-2f78ea.png) 0 -20px; }
  • 23. Мистерия 5
  • 24. Ещё в SASS• Генерация изображений с шумом gist.github.com/856571• Изменение изображений через ImageMagick github.com/StanAngeloff/compass-magick
  • 25. СсылкиHaml haml-lang.comCompass compass-style.org
  • 26. Вопросы?ai@evilmartians.comevilmatians.ru

×