Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Konstantin Kudryashov

September 26, 2011
Tweet

More Decks by Konstantin Kudryashov

Other Decks in Programming

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

    г.