Haml & Sass en 10 minutes faciles

Transcript

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. • Beauté du code (Difficile de faire du code laid)

   • Don’t repeat yourself (DRY) • Indentation du code (Python, anyone?) • Pensé pour les développeurs Principes

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. • Courbe d’apprentissage • Processus de compilation • Nouvelles conventions

    à suivre Désavantages

24. Sass Syntactically Awesome Stylesheets

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

26. • Don’t repeat yourself (DRY) • 100% backward-compatible avec CSS

    • Simplifier la vie des développeurs • “Make CSS fun again” Principes

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. • Mêmes que Haml • Sauf… • Pas de nouvelles

    conventions • Courbe d’apprentissage facile • Backward-compatible CSS! Désavantages

37. Discussion • Est-ce que ça en vaut la peine? •

    Alternatives pour PHP, Python, … • Slim, Tequila, CoffeeKup, LESS? • CoffeeScript? • Haters?