1. Haml & Sass
en 10 minutes faciles
Rémi Prévost — 28 juillet 2011, OpenCode (beta)

2. Même ce gars-là les utilise!

3. Haml
HTML Abstraction Markup Language

4. • Principes
• How-to
• Syntaxe
• Désavantages

5. Principes
• Beauté du code (Difficile de faire du code laid)
• Don’t repeat yourself (DRY)
• Indentation du code (Python, anyone?)
• Pensé pour les développeurs

6. How-to
Comment ça marche?

7. $ gem install haml
$ haml input.haml output.html

8. %ul
%li Foo
%li Bar
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>

9. Haml::Engine.new("%h1 Booya!").render
=> "<h1>Booya!</h1>"

10. # app/controllers/blog_controller.rb
def index
@posts = Post.all
end
# app/views/blog/index.haml
- @posts.each do |post|
%article
%h1= post.title
.content
= post.content

11. Syntaxe
Éléments, attributs, code…

12. %ul
%li Foo
%li Bar
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
%langages
%langage SOAP
%langage XML-RPC
<langages>
<langage>SOAP</langage>
<langage>XML-RPC</langage>
</langages>

13. %ul.people
%li Foo
%li Bar
<ul class="people">
<li>Foo</li>
<li>Bar</li>
</ul>
%langages#awesome
%langage SOAP
%langage XML-RPC
<langages id="awesome">
<langage>SOAP</langage>
<langage>XML-RPC</langage>
</langages>

14. %table
%tr
%th Nom
%th Prénom
%th Courriel
%tr
%td Prévost
%td Rémi
%td remi@exomel.com
<table>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Courriel</th>
</tr>
<tr>
<td>Prévost</td>
<td>Rémi</td>
<td>remi@exomel.com</td>
</tr>
</table>

15. %a{ :href => "/foo", :title => "On va là" } Un lien
<a href="/foo" title="On va là">Un lien</a>
%a{ :href => "/foo",
:title => "On va là"
:data => { :remote => true }
} Un lien
<a href="/foo" title="On va là" data-remote="true">Un lien</a>

16. / Un commentaire HTML
%strong No soup for you!
<!-- Un commentaire HTML -->
<strong>No soup for you!</strong>
-# Un commentaire Haml
%strong No soup for you!
<strong>No soup for you!</strong>

17. /[if lt IE 9]
%script{ :src=> "//html5shim.googlecode.com/svn/trunk/html5.js"
<!-- [if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

18. %time{ :datetime => Time.parse("2011/07/28 6pm").iso8601 }
Le 28 juillet à 18h
<time datetime="2011-07-28T18:00:00-04:00">
Le 28 juillet à 18h
</time>
%h1= @post.title
<h1>Bienvenue au premier OpenCode!</h1>

19. %ul
- 7.times do |index|
%li Item numéro #{index+1}
<ul>
<li>Item numéro 1</li>
<li>Item numéro 2</li>
<li>Item numéro 3</li>
<li>Item numéro 4</li>
<li>Item numéro 5</li>
<li>Item numéro 6</li>
<li>Item numéro 7</li>
</ul>

20. %article
%h1 Titre pour tester
%p Du contenu!
<article>
<h1>Titre pour tester</h1>
<p>Du contenu!</p>
</article>

21. - 5.times do
%article
%h1 Titre pour tester
%p Du contenu!
<article>
<h1>Titre pour tester</h1>
<p>Du contenu!</p>
</article>
<article>
<h1>Titre pour tester</h1>
<p>Du contenu!</p>
</article>
<article>
<h1>Titre pour tester</h1>
<p>Du contenu!</p>
</article>
…

22. %div.body
:markdown
# Titre de premier niveau
* Premier item
* Deuxième item
<div class="body">
<h1>Titre de premier niveau</h1>
<ul>
<li>Premier item</li>
<li>Deuxième item</li>
</ul>
</div>

23. Désavantages
• Courbe d’apprentissage
• Processus de compilation
• Nouvelles conventions à suivre

24. Sass
Syntactically Awesome Stylesheets

25. • Principes
• How-to
• Syntaxe
• Désavantages

26. Principes
• Don’t repeat yourself (DRY)
• 100% backward-compatible avec CSS
• Simplifier la vie des développeurs
• “Make CSS fun again”

27. How-to
Comment ça marche?

28. $ gem install sass
$ sass input.scss output.css

29. # app.rb
get "/css/screen.css" do
scss :screen
end

30. Syntaxe
Variables, nesting, opérations…

31. $orange: #ed7225;
body { background: $orange; }
body { background: #ed7225; }

32. nav {
width: 100%;
li {
border: 1px solid #ddd;
a {
float: left;
}
}
}
nav {
width: 100%; }
nav li {
border: 1px solid #ddd; }
nav li a {
float: left; }

33. @mixin border-radius($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
#bar, #foo {
@include border-radius(3px);
}
#bar, #foo {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

34. $orange: #ed7225;
a { color: $orange; }
a.important { color: $orange + #333; }
a.pas-important { color: $orange - #666; }
a {
color: #ed7225; }
a.important {
color: #ffa558; }
a.pas-important {
color: #870c00; }

35. @each $legume in patate, carotte, bacon {
.item-#{$legume} {
background-image: url("../img/icons/#{$legume}.png");
}
}
.item-patate {
background-image: url("../img/icons/patate.png"); }
.item-carotte {
background-image: url("../img/icons/carotte.png"); }
.item-bacon {
background-image: url("../img/icons/bacon.png"); }

36. Désavantages
• Mêmes que Haml
• Sauf…
• Pas de nouvelles conventions
• Courbe d’apprentissage facile
• Backward-compatible CSS!

37. Discussion
• Est-ce que ça en vaut la peine?
• Alternatives pour PHP, Python, …
• Slim, Tequila, CoffeeKup, LESS?
• CoffeeScript?
• Haters?