LESS, SASS, HAML: 4 буквы, изменившие frontend development
60
Константин Кудряшов 3 июля 2010 LESS, SASS, HAML: 4 буквы, изменившие frontend development 1 вторник, 6 июля 2010 г.
-
Upload
konstantin-kudryashov -
Category
Technology
-
view
8.157 -
download
1
description
Доклад по LESS, SASS, HAML с Symfony Camp UA 2010 Видео: http://video.yandex.ru/users/symfonycamp/view/1/user-tag/haml/
Transcript of LESS, SASS, HAML: 4 буквы, изменившие frontend development
Константин Кудряшов3 июля 2010
LESS, SASS, HAML:4 буквы, изменившие frontend development
1
вторник, 6 июля 2010 г.
Константин Кудряшов
• Бывший разработчик http://onliner.by
• Главный разработчик http://dev.by
• Symfony разработчик с 2007 года
• Автор и главный контрибьютор sfMate, sfLESSPlugin, sfCucumberPlugin, Capifony
http://everzet.com/
http://github.com/[email protected]
2
вторник, 6 июля 2010 г.
less, sass, haml
Model
View
Controller
3
вторник, 6 июля 2010 г.
less, sass, haml
Model
View
Controller
html
css js
4
вторник, 6 июля 2010 г.
less, sass, haml
Model
View
Controller
html
css js
5
вторник, 6 июля 2010 г.
less, sass, haml
несемантичный html
6
вторник, 6 июля 2010 г.
less, sass, haml
несемантичный html
7
вторник, 6 июля 2010 г.
less, sass, haml
семантичный html
8
вторник, 6 июля 2010 г.
less, sass, haml
семантичный html
9
вторник, 6 июля 2010 г.
less, sass, haml
«Суть семантической верстки состоит в том, что нам предлагается разделить "компот" и "мух" - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки.»
http://softwaremaniacs.org/blog/2005/06/08/juice-and-flies/
- Иван Сагалаев
10
вторник, 6 июля 2010 г.
less, sass, haml
HTML - язык формирования документа, а не представления
Для изменения представления используйте таблицы стилей
11
вторник, 6 июля 2010 г.
less, sass, haml
типичный CSS
12
вторник, 6 июля 2010 г.
less, sass, haml
используя
типичный CSSвы игнорируете DRY
13
вторник, 6 июля 2010 г.
less, sass, haml
14
вторник, 6 июля 2010 г.
less, sass, haml
• Переменные (Variables)
• Вложенности (Nesting)
• Примеси (Mixins)
• Наследование (Selector Inheritance)
15
вторник, 6 июля 2010 г.
less, sass, haml
CSSSASS
16
вторник, 6 июля 2010 г.
less, sass, haml
Установка
gem install haml
17
вторник, 6 июля 2010 г.
less, sass, haml
Использование
cd web/csssass --watch main.sass:main.css
18
вторник, 6 июля 2010 г.
less, sass, haml
Плюсы• Дополнительные возможности для
ваших стилей
• Переменные и простейшая арифметика в рамках CSS
Минусы
• Сложный, сильно отличающийся от «родного» CSS’а синтаксис
• Необходимость установки Ruby-парсера для *.sass файлов
• CSS стили не являются валидными SASS стилями
19
вторник, 6 июля 2010 г.
less, sass, haml
• Переменные (Variables)
• Вложенности (Nesting)
• Примеси (Mixins)
• Наследование (Selector Inheritance)
c
20
вторник, 6 июля 2010 г.
less, sass, haml
CSSSCSS
21
вторник, 6 июля 2010 г.
less, sass, haml
Установка
gem install haml
c
22
вторник, 6 июля 2010 г.
less, sass, haml
Использование
cd web/csssass --watch main.scss:main.css
c
23
вторник, 6 июля 2010 г.
less, sass, haml
Плюсы• Дополнительные возможности для
ваших стилей
• Переменные и простейшая арифметика в рамках CSS
• Близкий к CSS синтаксис
• CSS стили являются валидными SCSS стилями
Минусы• Необходимость установки Ruby-
парсера для *.sass файловc
24
вторник, 6 июля 2010 г.
less, sass, haml
http://sass-lang.com/http://github.com/dc/pass
http://github.com/glasserc/phphaml
25
вторник, 6 июля 2010 г.
less, sass, haml
26
вторник, 6 июля 2010 г.
less, sass, haml
• Переменные (Variables)
• Вложенности (Nesting)
• Примеси (Mixins)
• Наследование (Selector Inheritance)
27
вторник, 6 июля 2010 г.
less, sass, haml
CSSLESS
28
вторник, 6 июля 2010 г.
less, sass, haml
Установка
gem install less
29
вторник, 6 июля 2010 г.
less, sass, haml
Использование
cd web/csslessc --watch main.less main.css
30
вторник, 6 июля 2010 г.
less, sass, haml
http://lesscss.org/http://github.com/cloudhead/lesshttp://github.com/leafo/lessphp
31
вторник, 6 июля 2010 г.
less, sass, haml
less.js
32
вторник, 6 июля 2010 г.
less, sass, haml
Полностью переписан на JS с использованием библиотеки
CommonJS
33
вторник, 6 июля 2010 г.
less, sass, haml
Прекомпиляция через node.js:
Прекомпиляция средствами браузера:
cd web/csslessc 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 г.
less, sass, haml
./symfony plugins:install sfLESSPluginmkdir web/less
35
вторник, 6 июля 2010 г.
less, sass, haml
view.yml
36
вторник, 6 июля 2010 г.
less, sass, haml
37
вторник, 6 июля 2010 г.
less, sass, haml
npm install less
38
вторник, 6 июля 2010 г.
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
Плюсы• Дополнительные возможности для
ваших стилей
• Переменные и простейшая арифметика в рамках CSS
• Близкий к CSS синтаксис
• CSS стили являются валидными SCSS стилями
• Возможность работы как через скрипт, так и через браузер пользователей
Минусы
-43
вторник, 6 июля 2010 г.
less, sass, haml
http://www.symfony-project.org/plugins/sfLESSPlugin
http://github.com/everzet/sfLESSPlugin
https://github.com/cloudhead/less.js
44
вторник, 6 июля 2010 г.
less, sass, haml
семантичный html
45
вторник, 6 июля 2010 г.
less, sass, haml
46
вторник, 6 июля 2010 г.
less, sass, haml
№1: Потратьте всего 20 минут своего драгоценного времени на перевод одного из своих файлов-шаблонов на haml, до того, как начнете делать выводы
47
вторник, 6 июля 2010 г.
less, sass, haml
./symfony plugins:install sfHAMLPlugin
48
вторник, 6 июля 2010 г.
less, sass, haml
layout.haml
49
вторник, 6 июля 2010 г.
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 г.
less, sass, haml
№2: Space matters!
51
вторник, 6 июля 2010 г.
less, sass, haml
html:
haml:
<strong><?php echo $item->getTitle() ?></strong>
%strong= $item->getTitle()
52
вторник, 6 июля 2010 г.
less, sass, haml
html:
haml:
<strong class="code" id="message">Hello, World!</strong>
%strong{:class => "code", :id => "message"} Hello, World
53
вторник, 6 июля 2010 г.
less, sass, haml
html:
haml:
<strong class="code" id="message">Hello, World!</strong>
%strong.code#message Hello, World
54
вторник, 6 июля 2010 г.
less, sass, haml
№3: Верстайте CSS селекторами
55
вторник, 6 июля 2010 г.
less, sass, haml
html:
haml:
<div class="content">Some block</div>
.content Some block
56
вторник, 6 июля 2010 г.
less, sass, haml
CSS никогда не будет настолько же близок логически к HTML, насколько он
близок к HAML
57
вторник, 6 июля 2010 г.
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"> ⊕ <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'} ⊕ %span comment
58
вторник, 6 июля 2010 г.
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 г.
less, sass, haml
Вопросы ?
60
вторник, 6 июля 2010 г.
