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

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

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 [email protected] 2 вторник, 6 июля 2010 г.
  3. less, sass, haml Model View Controller html css js 4

    вторник, 6 июля 2010 г.
  4. less, sass, haml Model View Controller html css js 5

    вторник, 6 июля 2010 г.
  5. less, sass, haml «Суть семантической верстки состоит в том, что

    нам предлагается разделить "компот" и "мух" - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки.» http://softwaremaniacs.org/blog/2005/06/08/juice-and-flies/ - Иван Сагалаев 10 вторник, 6 июля 2010 г.
  6. less, sass, haml HTML - язык формирования документа, а не

    представления Для изменения представления используйте таблицы стилей 11 вторник, 6 июля 2010 г.
  7. less, sass, haml • Переменные (Variables) • Вложенности (Nesting) •

    Примеси (Mixins) • Наследование (Selector Inheritance) 15 вторник, 6 июля 2010 г.
  8. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей

    • Переменные и простейшая арифметика в рамках CSS Минусы • Сложный, сильно отличающийся от «родного» CSS’а синтаксис • Необходимость установки Ruby- парсера для *.sass файлов • CSS стили не являются валидными SASS стилями 19 вторник, 6 июля 2010 г.
  9. less, sass, haml • Переменные (Variables) • Вложенности (Nesting) •

    Примеси (Mixins) • Наследование (Selector Inheritance) c 20 вторник, 6 июля 2010 г.
  10. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей

    • Переменные и простейшая арифметика в рамках CSS • Близкий к CSS синтаксис • CSS стили являются валидными SCSS стилями Минусы • Необходимость установки Ruby- парсера для *.sass файлов c 24 вторник, 6 июля 2010 г.
  11. less, sass, haml • Переменные (Variables) • Вложенности (Nesting) •

    Примеси (Mixins) • Наследование (Selector Inheritance) 27 вторник, 6 июля 2010 г.
  12. 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 г.
  13. less, sass, haml Плюсы • Дополнительные возможности для ваших стилей

    • Переменные и простейшая арифметика в рамках CSS • Близкий к CSS синтаксис • CSS стили являются валидными SCSS стилями • Возможность работы как через скрипт, так и через браузер пользователей Минусы - 43 вторник, 6 июля 2010 г.
  14. less, sass, haml №1: Потратьте всего 20 минут своего драгоценного

    времени на перевод одного из своих файлов-шаблонов на haml, до того, как начнете делать выводы 47 вторник, 6 июля 2010 г.
  15. 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 г.
  16. less, sass, haml html: haml: <strong><?php echo $item->getTitle() ?></strong> %strong=

    $item->getTitle() 52 вторник, 6 июля 2010 г.
  17. less, sass, haml html: haml: <strong class="code" id="message">Hello, World!</strong> %strong{:class

    => "code", :id => "message"} Hello, World 53 вторник, 6 июля 2010 г.
  18. less, sass, haml CSS никогда не будет настолько же близок

    логически к HTML, насколько он близок к HAML 57 вторник, 6 июля 2010 г.
  19. 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 г.