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


                                   ...
Константин Кудряшов




              • Бывший разработчик • Symfony разработчик
                     http://onliner.by   ...
less, sass, haml




                          Model          Controller



                                  View




   ...
less, sass, haml




                          Model           Controller




                                   html

   ...
less, sass, haml




                          Model           Controller




                                   html

   ...
less, sass, haml




       несемантичный
                 html




                          6
вторник, 6 июля 2010 г.
less, sass, haml




       несемантичный
                 html




                          7
вторник, 6 июля 2010 г.
less, sass, haml




              семантичный
                      html




                             8
вторник, 6 ию...
less, sass, haml




              семантичный
                      html




                             9
вторник, 6 ию...
less, sass, haml




                               «Суть семантической верстки состоит в том, что нам
                   ...
less, sass, haml




                             HTML - язык формирования
                            документа, а не пре...
less, sass, haml




                          типичный CSS




                                         12
вторник, 6 июл...
less, sass, haml




                                     используя
                          типичный CSS
               ...
less, sass, haml




                          14
вторник, 6 июля 2010 г.
less, sass, haml



     • Переменные
       (Variables)
                          • Примеси
                            (...
less, sass, haml




       SASS                    CSS




                          16
вторник, 6 июля 2010 г.
less, sass, haml


  Установка




                          gem install haml




                                 17
втор...
less, sass, haml


 Использование




                          cd web/css
                          sass --watch main.sas...
less, sass, haml




             Плюсы
             •      Дополнительные возможности для
                    ваших стиле...
less, sass, haml



     • Переменные
       (Variables)
                          • Примеси
                            (...
less, sass, haml




       SCSS                    CSS




                          21
вторник, 6 июля 2010 г.
less, sass, haml


  Установка




                          gem install haml




                                        ...
less, sass, haml


 Использование




                          cd web/css
                          sass --watch main.scs...
less, sass, haml




             Плюсы
             •      Дополнительные возможности для
                    ваших стиле...
less, sass, haml




                                  http://sass-lang.com/
                               http://github....
less, sass, haml




                          26
вторник, 6 июля 2010 г.
less, sass, haml



     • Переменные
       (Variables)
                          • Примеси
                            (...
less, sass, haml




        LESS                   CSS




                          28
вторник, 6 июля 2010 г.
less, sass, haml


  Установка




                          gem install less




                                 29
втор...
less, sass, haml


 Использование




                          cd web/css
                          lessc --watch main.le...
less, sass, haml




                                   http://lesscss.org/
                          http://github.com/cl...
less, sass, haml




                          less.js




                            32
вторник, 6 июля 2010 г.
less, sass, haml




                          Полностью переписан на JS с
                          использованием библио...
less, sass, haml




       Прекомпиляция через node.js:

           cd web/css
           lessc main.less main.css




  ...
less, sass, haml




                          ./symfony plugins:install sfLESSPlugin
                          mkdir web/...
less, sass, haml




                          view.yml




                                     36
вторник, 6 июля 2010 г.
less, sass, haml




                          37
вторник, 6 июля 2010 г.
less, sass, haml




                          npm install less




                                 38
вторник, 6 июля 20...
less, sass, haml




                          app.yml




                                    39
вторник, 6 июля 2010 г.
less, sass, haml




                          view.yml




                                     40
вторник, 6 июля 2010 г.
less, sass, haml




                          41
вторник, 6 июля 2010 г.
less, sass, haml




                          42
вторник, 6 июля 2010 г.
less, sass, haml




             Плюсы
             •      Дополнительные возможности для
                    ваших стиле...
less, sass, haml




                           https://github.com/cloudhead/less.js
          http://www.symfony-project....
less, sass, haml




              семантичный
                      html




                             45
вторник, 6 и...
less, sass, haml




                          46
вторник, 6 июля 2010 г.
less, sass, haml




                          №1: Потратьте всего 20 минут своего
                          драгоценного ...
less, sass, haml




                          ./symfony plugins:install sfHAMLPlugin




                                ...
less, sass, haml




                      layout.haml




                                    49
вторник, 6 июля 2010 г.
less, sass, haml




       html:
           <div id="content">
             <div class="left column">
               <h2>...
less, sass, haml




                          №2: Space matters!




                                  51
вторник, 6 июля...
less, sass, haml




       html:

           <strong><?php echo $item->getTitle() ?></strong>




       haml:

         ...
less, sass, haml




       html:

           <strong class="code" id="message">Hello, World!</strong>




       haml:

 ...
less, sass, haml




       html:

           <strong class="code" id="message">Hello, World!</strong>




       haml:

 ...
less, sass, haml




                          №3: Верстайте CSS селекторами




                                       55...
less, sass, haml




       html:

           <div class="content">Some block</div>




       haml:

             .conten...
less, sass, haml




                            CSS никогда не будет настолько же
                          близок логиче...
less, sass, haml




       html:
           <?php if (count($topic->getComments)): ?>
             <a class="comments" hr...
less, sass, haml




                      http://haml-lang.com
       http://www.symfony-project.org/plugins/sfHAMLPlugin...
less, sass, haml




                          Вопросы ?




                              60
вторник, 6 июля 2010 г.
Upcoming SlideShare
Loading in...5
×

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

8,337

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 г.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×