Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

9,330 views

Published on

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

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

Published in: Technology, Education

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

  1. 1. LESS, SASS, HAML: 4 буквы, изменившие frontend development Константин Кудряшов 3 июля 2010 1 вторник, 6 июля 2010 г.
  2. 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. 3. less, sass, haml Model Controller View 3 вторник, 6 июля 2010 г.
  4. 4. less, sass, haml Model Controller html View css js 4 вторник, 6 июля 2010 г.
  5. 5. less, sass, haml Model Controller html View css js 5 вторник, 6 июля 2010 г.
  6. 6. less, sass, haml несемантичный html 6 вторник, 6 июля 2010 г.
  7. 7. less, sass, haml несемантичный html 7 вторник, 6 июля 2010 г.
  8. 8. less, sass, haml семантичный html 8 вторник, 6 июля 2010 г.
  9. 9. less, sass, haml семантичный html 9 вторник, 6 июля 2010 г.
  10. 10. less, sass, haml «Суть семантической верстки состоит в том, что нам предлагается разделить "компот" и "мух" - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки.» - Иван Сагалаев http://softwaremaniacs.org/blog/2005/06/08/juice-and-flies/ 10 вторник, 6 июля 2010 г.
  11. 11. less, sass, haml HTML - язык формирования документа, а не представления Для изменения представления используйте таблицы стилей 11 вторник, 6 июля 2010 г.
  12. 12. less, sass, haml типичный CSS 12 вторник, 6 июля 2010 г.
  13. 13. less, sass, haml используя типичный CSS вы игнорируете DRY 13 вторник, 6 июля 2010 г.
  14. 14. less, sass, haml 14 вторник, 6 июля 2010 г.
  15. 15. less, sass, haml • Переменные (Variables) • Примеси (Mixins) • Вложенности (Nesting) • Наследование (Selector Inheritance) 15 вторник, 6 июля 2010 г.
  16. 16. less, sass, haml SASS CSS 16 вторник, 6 июля 2010 г.
  17. 17. less, sass, haml Установка gem install haml 17 вторник, 6 июля 2010 г.
  18. 18. less, sass, haml Использование cd web/css sass --watch main.sass:main.css 18 вторник, 6 июля 2010 г.
  19. 19. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей • Переменные и простейшая арифметика в рамках CSS Минусы • Сложный, сильно отличающийся от «родного» CSS’а синтаксис • Необходимость установки Ruby- парсера для *.sass файлов • CSS стили не являются валидными SASS стилями 19 вторник, 6 июля 2010 г.
  20. 20. less, sass, haml • Переменные (Variables) • Примеси (Mixins) • Вложенности (Nesting) • Наследование (Selector Inheritance) c 20 вторник, 6 июля 2010 г.
  21. 21. less, sass, haml SCSS CSS 21 вторник, 6 июля 2010 г.
  22. 22. less, sass, haml Установка gem install haml c 22 вторник, 6 июля 2010 г.
  23. 23. less, sass, haml Использование cd web/css sass --watch main.scss:main.css c 23 вторник, 6 июля 2010 г.
  24. 24. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей • Переменные и простейшая арифметика в рамках CSS • Близкий к CSS синтаксис • CSS стили являются валидными SCSS стилями Минусы • Необходимость установки Ruby- парсера для *.sass файлов c 24 вторник, 6 июля 2010 г.
  25. 25. less, sass, haml http://sass-lang.com/ http://github.com/dc/pass http://github.com/glasserc/phphaml 25 вторник, 6 июля 2010 г.
  26. 26. less, sass, haml 26 вторник, 6 июля 2010 г.
  27. 27. less, sass, haml • Переменные (Variables) • Примеси (Mixins) • Вложенности (Nesting) • Наследование (Selector Inheritance) 27 вторник, 6 июля 2010 г.
  28. 28. less, sass, haml LESS CSS 28 вторник, 6 июля 2010 г.
  29. 29. less, sass, haml Установка gem install less 29 вторник, 6 июля 2010 г.
  30. 30. less, sass, haml Использование cd web/css lessc --watch main.less main.css 30 вторник, 6 июля 2010 г.
  31. 31. less, sass, haml http://lesscss.org/ http://github.com/cloudhead/less http://github.com/leafo/lessphp 31 вторник, 6 июля 2010 г.
  32. 32. less, sass, haml less.js 32 вторник, 6 июля 2010 г.
  33. 33. less, sass, haml Полностью переписан на JS с использованием библиотеки CommonJS 33 вторник, 6 июля 2010 г.
  34. 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. 35. less, sass, haml ./symfony plugins:install sfLESSPlugin mkdir web/less 35 вторник, 6 июля 2010 г.
  36. 36. less, sass, haml view.yml 36 вторник, 6 июля 2010 г.
  37. 37. less, sass, haml 37 вторник, 6 июля 2010 г.
  38. 38. less, sass, haml npm install less 38 вторник, 6 июля 2010 г.
  39. 39. less, sass, haml app.yml 39 вторник, 6 июля 2010 г.
  40. 40. less, sass, haml view.yml 40 вторник, 6 июля 2010 г.
  41. 41. less, sass, haml 41 вторник, 6 июля 2010 г.
  42. 42. less, sass, haml 42 вторник, 6 июля 2010 г.
  43. 43. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей • Переменные и простейшая арифметика в рамках CSS • Близкий к CSS синтаксис • CSS стили являются валидными SCSS стилями • Возможность работы как через скрипт, так и через браузер пользователей Минусы - 43 вторник, 6 июля 2010 г.
  44. 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. 45. less, sass, haml семантичный html 45 вторник, 6 июля 2010 г.
  46. 46. less, sass, haml 46 вторник, 6 июля 2010 г.
  47. 47. less, sass, haml №1: Потратьте всего 20 минут своего драгоценного времени на перевод одного из своих файлов-шаблонов на haml, до того, как начнете делать выводы 47 вторник, 6 июля 2010 г.
  48. 48. less, sass, haml ./symfony plugins:install sfHAMLPlugin 48 вторник, 6 июля 2010 г.
  49. 49. less, sass, haml layout.haml 49 вторник, 6 июля 2010 г.
  50. 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. 51. less, sass, haml №2: Space matters! 51 вторник, 6 июля 2010 г.
  52. 52. less, sass, haml html: <strong><?php echo $item->getTitle() ?></strong> haml: %strong= $item->getTitle() 52 вторник, 6 июля 2010 г.
  53. 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. 54. less, sass, haml html: <strong class="code" id="message">Hello, World!</strong> haml: %strong.code#message Hello, World 54 вторник, 6 июля 2010 г.
  55. 55. less, sass, haml №3: Верстайте CSS селекторами 55 вторник, 6 июля 2010 г.
  56. 56. less, sass, haml html: <div class="content">Some block</div> haml: .content Some block 56 вторник, 6 июля 2010 г.
  57. 57. less, sass, haml CSS никогда не будет настолько же близок логически к HTML, насколько он близок к HAML 57 вторник, 6 июля 2010 г.
  58. 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. 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. 60. less, sass, haml Вопросы ? 60 вторник, 6 июля 2010 г.

×