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

Доклад с sfCampUA'10 про frontend фреймворки и их использование в symfony1 проекте

Transcript

1. Константин Кудряшов 3 июля 2010 LESS, SASS, HAML: 4 буквы, изменившие frontend development 1 вторник, 6 июля 2010 г.
2. Константин Кудряшов • Бывший разработчик http://onliner.by • Главный разработчик http://dev.by • Symfony разработчик с 2007 года • Автор и главный контрибьютор sfMate, sfLESSPlugin, sfCucumberPlugin, Capifony http://everzet.com/ http://github.com/everzet ever.zet@gmail.com 2 вторник, 6 июля 2010 г.
3. less, sass, haml Model View Controller 3 вторник, 6 июля 2010 г.
4. less, sass, haml Model View Controller html css js 4 вторник, 6 июля 2010 г.
5. less, sass, haml Model View Controller html 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) • Вложенности (Nesting) • Примеси (Mixins) • Наследование (Selector Inheritance) 15 вторник, 6 июля 2010 г.
16. less, sass, haml CSS SASS 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) • Вложенности (Nesting) • Примеси (Mixins) • Наследование (Selector Inheritance) c 20 вторник, 6 июля 2010 г.
21. less, sass, haml CSS SCSS 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) • Вложенности (Nesting) • Примеси (Mixins) • Наследование (Selector Inheritance) 27 вторник, 6 июля 2010 г.
28. less, sass, haml CSS LESS 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 http://www.symfony-project.org/plugins/sfLESSPlugin http://github.com/everzet/sfLESSPlugin https://github.com/cloudhead/less.js 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: haml: <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> #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: haml: <strong><?php echo $item->getTitle() ?></strong> %strong= $item->getTitle() 52 вторник, 6 июля 2010 г.
53. less, sass, haml html: haml: <strong class="code" id="message">Hello, World!</strong> %strong{:class => "code", :id => "message"} Hello, World 53 вторник, 6 июля 2010 г.
54. less, sass, haml html: haml: <strong class="code" id="message">Hello, World!</strong> %strong.code#message Hello, World 54 вторник, 6 июля 2010 г.
55. less, sass, haml №3: Верстайте CSS селекторами 55 вторник, 6 июля 2010 г.
56. less, sass, haml html: haml: <div class="content">Some block</div> .content Some block 56 вторник, 6 июля 2010 г.
57. less, sass, haml CSS никогда не будет настолько же близок логически к HTML, насколько он близок к HAML 57 вторник, 6 июля 2010 г.
58. less, sass, haml html: haml: <?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; ?> - 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://www.symfony-project.org/plugins/sfHAMLPlugin http://github.com/everzet/sfHAMLPlugin http://github.com/everzet/phphaml http://haml-lang.com 59 вторник, 6 июля 2010 г.
60. less, sass, haml Вопросы ? 60 вторник, 6 июля 2010 г.