Доклад по LESS, SASS, HAML с Symfony Camp UA 2010 Видео: http://video.yandex.ru/users/symfonycamp/view/1/user-tag/haml/

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

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. less, sass, haml
Model Controller
View
3
вторник, 6 июля 2010 г.

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

5. less, sass, haml
Model Controller
html
View
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)
• Примеси
(Mixins)
• Вложенности
(Nesting)
• Наследование
(Selector Inheritance)
15
вторник, 6 июля 2010 г.

16. less, sass, haml
SASS CSS
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)
• Примеси
(Mixins)
• Вложенности
(Nesting)
• Наследование
(Selector Inheritance)
c
20
вторник, 6 июля 2010 г.

21. less, sass, haml
SCSS CSS
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)
• Примеси
(Mixins)
• Вложенности
(Nesting)
• Наследование
(Selector Inheritance)
27
вторник, 6 июля 2010 г.

28. less, sass, haml
LESS CSS
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
https://github.com/cloudhead/less.js
http://www.symfony-project.org/plugins/sfLESSPlugin
http://github.com/everzet/sfLESSPlugin
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:
<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. less, sass, haml
№2: Space matters!
51
вторник, 6 июля 2010 г.

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

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. less, sass, haml
html:
<strong class="code" id="message">Hello, World!</strong>
haml:
%strong.code#message Hello, World
54
вторник, 6 июля 2010 г.

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

56. less, sass, haml
html:
<div class="content">Some block</div>
haml:
.content Some block
56
вторник, 6 июля 2010 г.

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

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. 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. less, sass, haml
Вопросы ?
60
вторник, 6 июля 2010 г.