Your SlideShare is downloading. ×
LESS, SASS, HAML: 4 буквы, изменившие frontend development
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

LESS, SASS, HAML: 4 буквы, изменившие frontend development

8,138

Published on

Доклад по LESS, SASS, HAML с Symfony Camp UA 2010 …

Доклад по LESS, SASS, HAML с Symfony Camp UA 2010

Видео: http://video.yandex.ru/users/symfonycamp/view/1/user-tag/haml/

Published in: Technology, Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,138
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
60
Comments
0
Likes
8
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. LESS, SASS, HAML: 4 буквы, изменившие frontend development Константин Кудряшов 3 июля 2010 1 вторник, 6 июля 2010 г.
  • 2. Константин Кудряшов • Бывший разработчик • Symfony разработчик http://onliner.by с 2007 года • Главный • Автор и главный разработчик контрибьютор sfMate, http://dev.by sfLESSPlugin, sfCucumberPlugin, Capifony http://everzet.com/ http://github.com/everzet ever.zet@gmail.com 2 вторник, 6 июля 2010 г.
  • 3. less, sass, haml Model Controller View 3 вторник, 6 июля 2010 г.
  • 4. less, sass, haml Model Controller html View css js 4 вторник, 6 июля 2010 г.
  • 5. less, sass, haml Model Controller html View css js 5 вторник, 6 июля 2010 г.
  • 6. less, sass, haml несемантичный html 6 вторник, 6 июля 2010 г.
  • 7. less, sass, haml несемантичный html 7 вторник, 6 июля 2010 г.
  • 8. less, sass, haml семантичный html 8 вторник, 6 июля 2010 г.
  • 9. less, sass, haml семантичный html 9 вторник, 6 июля 2010 г.
  • 10. less, sass, haml «Суть семантической верстки состоит в том, что нам предлагается разделить "компот" и "мух" - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки.» - Иван Сагалаев http://softwaremaniacs.org/blog/2005/06/08/juice-and-flies/ 10 вторник, 6 июля 2010 г.
  • 11. less, sass, haml HTML - язык формирования документа, а не представления Для изменения представления используйте таблицы стилей 11 вторник, 6 июля 2010 г.
  • 12. less, sass, haml типичный CSS 12 вторник, 6 июля 2010 г.
  • 13. less, sass, haml используя типичный CSS вы игнорируете DRY 13 вторник, 6 июля 2010 г.
  • 14. less, sass, haml 14 вторник, 6 июля 2010 г.
  • 15. less, sass, haml • Переменные (Variables) • Примеси (Mixins) • Вложенности (Nesting) • Наследование (Selector Inheritance) 15 вторник, 6 июля 2010 г.
  • 16. less, sass, haml SASS CSS 16 вторник, 6 июля 2010 г.
  • 17. less, sass, haml Установка gem install haml 17 вторник, 6 июля 2010 г.
  • 18. less, sass, haml Использование cd web/css sass --watch main.sass:main.css 18 вторник, 6 июля 2010 г.
  • 19. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей • Переменные и простейшая арифметика в рамках CSS Минусы • Сложный, сильно отличающийся от «родного» CSS’а синтаксис • Необходимость установки Ruby- парсера для *.sass файлов • CSS стили не являются валидными SASS стилями 19 вторник, 6 июля 2010 г.
  • 20. less, sass, haml • Переменные (Variables) • Примеси (Mixins) • Вложенности (Nesting) • Наследование (Selector Inheritance) c 20 вторник, 6 июля 2010 г.
  • 21. less, sass, haml SCSS CSS 21 вторник, 6 июля 2010 г.
  • 22. less, sass, haml Установка gem install haml c 22 вторник, 6 июля 2010 г.
  • 23. less, sass, haml Использование cd web/css sass --watch main.scss:main.css c 23 вторник, 6 июля 2010 г.
  • 24. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей • Переменные и простейшая арифметика в рамках CSS • Близкий к CSS синтаксис • CSS стили являются валидными SCSS стилями Минусы • Необходимость установки Ruby- парсера для *.sass файлов c 24 вторник, 6 июля 2010 г.
  • 25. less, sass, haml http://sass-lang.com/ http://github.com/dc/pass http://github.com/glasserc/phphaml 25 вторник, 6 июля 2010 г.
  • 26. less, sass, haml 26 вторник, 6 июля 2010 г.
  • 27. less, sass, haml • Переменные (Variables) • Примеси (Mixins) • Вложенности (Nesting) • Наследование (Selector Inheritance) 27 вторник, 6 июля 2010 г.
  • 28. less, sass, haml LESS CSS 28 вторник, 6 июля 2010 г.
  • 29. less, sass, haml Установка gem install less 29 вторник, 6 июля 2010 г.
  • 30. less, sass, haml Использование cd web/css lessc --watch main.less main.css 30 вторник, 6 июля 2010 г.
  • 31. less, sass, haml http://lesscss.org/ http://github.com/cloudhead/less http://github.com/leafo/lessphp 31 вторник, 6 июля 2010 г.
  • 32. less, sass, haml less.js 32 вторник, 6 июля 2010 г.
  • 33. less, sass, haml Полностью переписан на JS с использованием библиотеки CommonJS 33 вторник, 6 июля 2010 г.
  • 34. less, sass, haml Прекомпиляция через node.js: cd web/css lessc main.less main.css Прекомпиляция средствами браузера: <link rel="stylesheet/less" href="main.less" type="text/css"> <script src="less.js" type="text/javascript"></script> 34 вторник, 6 июля 2010 г.
  • 35. less, sass, haml ./symfony plugins:install sfLESSPlugin mkdir web/less 35 вторник, 6 июля 2010 г.
  • 36. less, sass, haml view.yml 36 вторник, 6 июля 2010 г.
  • 37. less, sass, haml 37 вторник, 6 июля 2010 г.
  • 38. less, sass, haml npm install less 38 вторник, 6 июля 2010 г.
  • 39. less, sass, haml app.yml 39 вторник, 6 июля 2010 г.
  • 40. less, sass, haml view.yml 40 вторник, 6 июля 2010 г.
  • 41. less, sass, haml 41 вторник, 6 июля 2010 г.
  • 42. less, sass, haml 42 вторник, 6 июля 2010 г.
  • 43. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей • Переменные и простейшая арифметика в рамках CSS • Близкий к CSS синтаксис • CSS стили являются валидными SCSS стилями • Возможность работы как через скрипт, так и через браузер пользователей Минусы - 43 вторник, 6 июля 2010 г.
  • 44. less, sass, haml https://github.com/cloudhead/less.js http://www.symfony-project.org/plugins/sfLESSPlugin http://github.com/everzet/sfLESSPlugin 44 вторник, 6 июля 2010 г.
  • 45. less, sass, haml семантичный html 45 вторник, 6 июля 2010 г.
  • 46. less, sass, haml 46 вторник, 6 июля 2010 г.
  • 47. less, sass, haml №1: Потратьте всего 20 минут своего драгоценного времени на перевод одного из своих файлов-шаблонов на haml, до того, как начнете делать выводы 47 вторник, 6 июля 2010 г.
  • 48. less, sass, haml ./symfony plugins:install sfHAMLPlugin 48 вторник, 6 июля 2010 г.
  • 49. less, sass, haml layout.haml 49 вторник, 6 июля 2010 г.
  • 50. less, sass, haml html: <div id="content"> <div class="left column"> <h2>Welcome to our site!</h2> <p><?php echo $article->getContent ?></p> </div> <div class="right column"> <?php include_partial('sidebar') ?> </div> </div> haml: #content .left.column %h2 Welcome to our site! = $article->getContent() .right.column - include_partial('sidebar') 50 вторник, 6 июля 2010 г.
  • 51. less, sass, haml №2: Space matters! 51 вторник, 6 июля 2010 г.
  • 52. less, sass, haml html: <strong><?php echo $item->getTitle() ?></strong> haml: %strong= $item->getTitle() 52 вторник, 6 июля 2010 г.
  • 53. less, sass, haml html: <strong class="code" id="message">Hello, World!</strong> haml: %strong{:class => "code", :id => "message"} Hello, World 53 вторник, 6 июля 2010 г.
  • 54. less, sass, haml html: <strong class="code" id="message">Hello, World!</strong> haml: %strong.code#message Hello, World 54 вторник, 6 июля 2010 г.
  • 55. less, sass, haml №3: Верстайте CSS селекторами 55 вторник, 6 июля 2010 г.
  • 56. less, sass, haml html: <div class="content">Some block</div> haml: .content Some block 56 вторник, 6 июля 2010 г.
  • 57. less, sass, haml CSS никогда не будет настолько же близок логически к HTML, насколько он близок к HAML 57 вторник, 6 июля 2010 г.
  • 58. less, sass, haml html: <?php if (count($topic->getComments)): ?> <a class="comments" href="<?php url_for(‘blog_topic’, $topic) ?>#comments"> <?php echo $topic->getComments() ?> <span>comments</span> </a> <?php else: ?> <a class="comments" href="<?php url_for(‘blog_topic’, $topic) ?>#comments"> &oplus; <span>comment</span> </a> <?php endif; ?> haml: - if (count($topic->getComments())) %a.comments{:href => url_for('blog_topic', $topic) . '#comments'} = count($topic->getComments()) %span comments - else %a.comments{:href => url_for('blog_topic', $topic) . '#add_comment'} &oplus; %span comment 58 вторник, 6 июля 2010 г.
  • 59. less, sass, haml http://haml-lang.com http://www.symfony-project.org/plugins/sfHAMLPlugin http://github.com/everzet/sfHAMLPlugin http://github.com/everzet/phphaml 59 вторник, 6 июля 2010 г.
  • 60. less, sass, haml Вопросы ? 60 вторник, 6 июля 2010 г.

×