Ускорение frontend-разработки с помощьюHaml, Sass, Compass
Андрей Ситник@andrey_sitnikai@evilmartians.comsitnik.ru
Лень, нетерпимость и гордыня
1996        2011HTML, CSS   HTML, CSS
Мистерияо том, как Haml, Sass и Compassпомогают нам верстатьна реальном примере с groupon.ru
Скачайте примерevilmartians.ru/rit2011
Haml — язык шаблоновс альтернативным синтаксисом      для HTML или XML
Шаблон наВеб-сервер   Haml   HTMLБраузер
Поддержка Haml   PHP, ASP.Net, Java,Ruby on Rails, Perl, Python
!!! 5                <!DOCTYPE html>%html( lang="ru" )   <html lang="ru"> %body                <body>   #content          ...
Мистерия 1
Sass — препроцессор CSS
Compass — набор кошерных инструментов и           шаблонов для Sass
Начало работы         Разработка             Деплойcompass create        compass watch          compass compileСоздаёт фай...
$width: 100px;@mixin default-font($size = 12px) {  font: $size serif;}                                      #content {#con...
Мистерия 2
@import compass/css3input {                                        CSS3  @include box-shadow(5px); }input {  box-shadow: b...
Мистерия 3
Градиенты@import compass/css3;$experimental-support-for-svg: true;header {  @include background(linear-gradient(red, blue)...
Мистерия 4
data:uribackground: inline-image(icon.png) no-repeat;background: url(data:image/png;base64,iVBORw0KG…)          no-repeat;
Спрайты$sprite: sprite-map(dir/*.png); /* dir/one.png, dir/two.png */.one { background: sprite($sprite, one); }.two { back...
Мистерия 5
Ещё в SASS• Генерация изображений с шумом  gist.github.com/856571• Изменение изображений через  ImageMagick  github.com/St...
СсылкиHaml    haml-lang.comCompass compass-style.org
Вопросы?ai@evilmartians.comevilmatians.ru
Ускорение frontend-разработки с помощью Haml, Sass, Compass
Upcoming SlideShare
Loading in …5
×

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

2,975 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Ускорение frontend-разработки с помощьюHaml, Sass, Compass
  2. 2. Андрей Ситник@andrey_sitnikai@evilmartians.comsitnik.ru
  3. 3. Лень, нетерпимость и гордыня
  4. 4. 1996 2011HTML, CSS HTML, CSS
  5. 5. Мистерияо том, как Haml, Sass и Compassпомогают нам верстатьна реальном примере с groupon.ru
  6. 6. Скачайте примерevilmartians.ru/rit2011
  7. 7. Haml — язык шаблоновс альтернативным синтаксисом для HTML или XML
  8. 8. Шаблон наВеб-сервер Haml HTMLБраузер
  9. 9. Поддержка Haml PHP, ASP.Net, Java,Ruby on Rails, Perl, Python
  10. 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. 11. Мистерия 1
  12. 12. Sass — препроцессор CSS
  13. 13. Compass — набор кошерных инструментов и шаблонов для Sass
  14. 14. Начало работы Разработка Деплойcompass create compass watch compass compileСоздаёт файл Следит за изменением Компилируетнастроек с путями с sass-файлов и тут же sass-файлы в CSS,sass- и css-файлам обновляет css-файлы чтобы отдавать пользователям уже готовые css-файлы
  15. 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. 16. Мистерия 2
  17. 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. 18. Мистерия 3
  19. 19. Градиенты@import compass/css3;$experimental-support-for-svg: true;header { @include background(linear-gradient(red, blue)); @include filter-gradient(gray, black);}
  20. 20. Мистерия 4
  21. 21. data:uribackground: inline-image(icon.png) no-repeat;background: url(data:image/png;base64,iVBORw0KG…) no-repeat;
  22. 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. 23. Мистерия 5
  24. 24. Ещё в SASS• Генерация изображений с шумом gist.github.com/856571• Изменение изображений через ImageMagick github.com/StanAngeloff/compass-magick
  25. 25. СсылкиHaml haml-lang.comCompass compass-style.org
  26. 26. Вопросы?ai@evilmartians.comevilmatians.ru

×