Tweet
Tweet

Slide 1

Slide 1 text

Константин Кудряшов 3 июля 2010 LESS, SASS, HAML: 4 буквы, изменившие frontend development 1 вторник, 6 июля 2010 г.

Slide 2

Slide 2 text

Константин Кудряшов • Бывший разработчик http://onliner.by • Главный разработчик http://dev.by • Symfony разработчик с 2007 года • Автор и главный контрибьютор sfMate, sfLESSPlugin, sfCucumberPlugin, Capifony http://everzet.com/ http://github.com/everzet [email protected] 2 вторник, 6 июля 2010 г.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

less, sass, haml несемантичный html 6 вторник, 6 июля 2010 г.

Slide 7

Slide 7 text

less, sass, haml несемантичный html 7 вторник, 6 июля 2010 г.

Slide 8

Slide 8 text

less, sass, haml семантичный html 8 вторник, 6 июля 2010 г.

Slide 9

Slide 9 text

less, sass, haml семантичный html 9 вторник, 6 июля 2010 г.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

less, sass, haml HTML - язык формирования документа, а не представления Для изменения представления используйте таблицы стилей 11 вторник, 6 июля 2010 г.

Slide 12

Slide 12 text

less, sass, haml типичный CSS 12 вторник, 6 июля 2010 г.

Slide 13

Slide 13 text

less, sass, haml используя типичный CSS вы игнорируете DRY 13 вторник, 6 июля 2010 г.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

less, sass, haml • Переменные (Variables) • Вложенности (Nesting) • Примеси (Mixins) • Наследование (Selector Inheritance) 15 вторник, 6 июля 2010 г.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

less, sass, haml Установка gem install haml 17 вторник, 6 июля 2010 г.

Slide 18

Slide 18 text

less, sass, haml Использование cd web/css sass --watch main.sass:main.css 18 вторник, 6 июля 2010 г.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

less, sass, haml • Переменные (Variables) • Вложенности (Nesting) • Примеси (Mixins) • Наследование (Selector Inheritance) c 20 вторник, 6 июля 2010 г.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

less, sass, haml Установка gem install haml c 22 вторник, 6 июля 2010 г.

Slide 23

Slide 23 text

less, sass, haml Использование cd web/css sass --watch main.scss:main.css c 23 вторник, 6 июля 2010 г.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

less, sass, haml http://sass-lang.com/ http://github.com/dc/pass http://github.com/glasserc/phphaml 25 вторник, 6 июля 2010 г.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

less, sass, haml • Переменные (Variables) • Вложенности (Nesting) • Примеси (Mixins) • Наследование (Selector Inheritance) 27 вторник, 6 июля 2010 г.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

less, sass, haml Установка gem install less 29 вторник, 6 июля 2010 г.

Slide 30

Slide 30 text

less, sass, haml Использование cd web/css lessc --watch main.less main.css 30 вторник, 6 июля 2010 г.

Slide 31

Slide 31 text

less, sass, haml http://lesscss.org/ http://github.com/cloudhead/less http://github.com/leafo/lessphp 31 вторник, 6 июля 2010 г.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

less, sass, haml Полностью переписан на JS с использованием библиотеки CommonJS 33 вторник, 6 июля 2010 г.

Slide 34

Slide 34 text

less, sass, haml Прекомпиляция через node.js: Прекомпиляция средствами браузера: cd web/css lessc main.less main.css 34 вторник, 6 июля 2010 г.

Slide 35

Slide 35 text

less, sass, haml ./symfony plugins:install sfLESSPlugin mkdir web/less 35 вторник, 6 июля 2010 г.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

less, sass, haml http://www.symfony-project.org/plugins/sfLESSPlugin http://github.com/everzet/sfLESSPlugin https://github.com/cloudhead/less.js 44 вторник, 6 июля 2010 г.

Slide 45

Slide 45 text

less, sass, haml семантичный html 45 вторник, 6 июля 2010 г.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

less, sass, haml ./symfony plugins:install sfHAMLPlugin 48 вторник, 6 июля 2010 г.

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

less, sass, haml html: haml:

Welcome to our site!

getContent ?>

#content .left.column %h2 Welcome to our site! = $article->getContent() .right.column - include_partial('sidebar') 50 вторник, 6 июля 2010 г.

Slide 51

Slide 51 text

less, sass, haml №2: Space matters! 51 вторник, 6 июля 2010 г.

Slide 52

Slide 52 text

less, sass, haml html: haml: getTitle() ?> %strong= $item->getTitle() 52 вторник, 6 июля 2010 г.

Slide 53

Slide 53 text

less, sass, haml html: haml: Hello, World! %strong{:class => "code", :id => "message"} Hello, World 53 вторник, 6 июля 2010 г.

Slide 54

Slide 54 text

less, sass, haml html: haml: Hello, World! %strong.code#message Hello, World 54 вторник, 6 июля 2010 г.

Slide 55

Slide 55 text

less, sass, haml №3: Верстайте CSS селекторами 55 вторник, 6 июля 2010 г.

Slide 56

Slide 56 text

less, sass, haml html: haml:
Some block
.content Some block 56 вторник, 6 июля 2010 г.

Slide 57

Slide 57 text

less, sass, haml CSS никогда не будет настолько же близок логически к HTML, насколько он близок к HAML 57 вторник, 6 июля 2010 г.

Slide 58

Slide 58 text

less, sass, haml html: haml: getComments)): ?> getComments() ?> comments ⊕ comment - 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'} ⊕ %span comment 58 вторник, 6 июля 2010 г.

Slide 59

Slide 59 text

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 г.

Slide 60

Slide 60 text

less, sass, haml Вопросы ? 60 вторник, 6 июля 2010 г.