0
Haml & Sass       en 10 minutes facilesRémi Prévost — 28 juillet 2011, OpenCode (beta)
Même ce gars-là les utilise!
HamlHTML Abstraction Markup Language
•   Principes•   How-to•   Syntaxe•   Désavantages
Principes•   Beauté du code (Difficile de faire du code laid)•   Don’t repeat yourself (DRY)•   Indentation du code (Pytho...
How-toComment ça marche?
$ gem install haml$ haml input.haml output.html
%ul  %li Foo  %li Bar<ul>  <li>Foo</li>  <li>Bar</li></ul>
Haml::Engine.new("%h1 Booya!").render=> "<h1>Booya!</h1>"
# app/controllers/blog_controller.rbdef index  @posts = Post.allend# app/views/blog/index.haml- @posts.each do |post|  %ar...
SyntaxeÉléments, attributs, code…
%ul  %li Foo  %li Bar<ul>  <li>Foo</li>  <li>Bar</li></ul>%langages  %langage SOAP  %langage XML-RPC<langages>  <langage>S...
%ul.people  %li Foo  %li Bar<ul class="people">  <li>Foo</li>  <li>Bar</li></ul>%langages#awesome  %langage SOAP  %langage...
%table  %tr    %th   Nom    %th   Prénom    %th   Courriel  %tr    %td   Prévost    %td   Rémi    %td   remi@exomel.com<ta...
%a{ :href => "/foo", :title => "On va là" } Un lien<a href="/foo" title="On va là">Un lien</a>%a{ :href => "/foo",    :tit...
/ Un commentaire HTML%strong No soup for you!<!-- Un commentaire HTML --><strong>No soup for you!</strong>-# Un commentair...
/[if lt IE 9]  %script{ :src=> "//html5shim.googlecode.com/svn/trunk/html5.js"<!-- [if lt IE 9]><script src="//html5shim.g...
%time{ :datetime => Time.parse("2011/07/28 6pm").iso8601 }  Le 28 juillet à 18h<time datetime="2011-07-28T18:00:00-04:00">...
%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>I...
%article  %h1 Titre pour tester  %p Du contenu!<article>  <h1>Titre pour tester</h1>  <p>Du contenu!</p></article>
- 5.times do  %article    %h1 Titre pour tester    %p Du contenu!<article>  <h1>Titre pour tester</h1>  <p>Du contenu!</p>...
%div.body  :markdown    # Titre de premier niveau    * Premier item    * Deuxième item<div class="body">   <h1>Titre de pr...
Désavantages•   Courbe d’apprentissage•   Processus de compilation•   Nouvelles conventions à suivre
SassSyntactically Awesome Stylesheets
•   Principes•   How-to•   Syntaxe•   Désavantages
Principes•   Don’t repeat yourself (DRY)•   100% backward-compatible avec CSS•   Simplifier la vie des développeurs•   “Ma...
How-toComment ça marche?
$ gem install sass$ sass input.scss output.css
# app.rbget "/css/screen.css" do  scss :screenend
SyntaxeVariables, nesting, opérations…
$orange: #ed7225;body { background: $orange; }body { background: #ed7225; }
nav {  width: 100%;  li {    border: 1px solid #ddd;    a {       float: left;    }  }}nav {  width: 100%; }nav li {  bord...
@mixin border-radius($radius) {  border-radius: $radius;  -moz-border-radius: $radius;  -webkit-border-radius: $radius;}#b...
$orange: #ed7225;a { color: $orange; }a.important { color: $orange + #333; }a.pas-important { color: $orange - #666; }a { ...
@each $legume in patate, carotte, bacon {  .item-#{$legume} {    background-image: url("../img/icons/#{$legume}.png");  }}...
Désavantages•   Mêmes que Haml•   Sauf…    •   Pas de nouvelles conventions    •   Courbe d’apprentissage facile    •   Ba...
Discussion•   Est-ce que ça en vaut la peine?•   Alternatives pour PHP, Python, …•   Slim, Tequila, CoffeeKup, LESS?•   Co...
Upcoming SlideShare
Loading in...5
×

OpenCode beta : Haml & Sass

6,087

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,087
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "OpenCode beta : Haml & Sass"

  1. 1. Haml & Sass en 10 minutes facilesRémi Prévost — 28 juillet 2011, OpenCode (beta)
  2. 2. Même ce gars-là les utilise!
  3. 3. HamlHTML Abstraction Markup Language
  4. 4. • Principes• How-to• Syntaxe• Désavantages
  5. 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. 6. How-toComment ça marche?
  7. 7. $ gem install haml$ haml input.haml output.html
  8. 8. %ul %li Foo %li Bar<ul> <li>Foo</li> <li>Bar</li></ul>
  9. 9. Haml::Engine.new("%h1 Booya!").render=> "<h1>Booya!</h1>"
  10. 10. # app/controllers/blog_controller.rbdef index @posts = Post.allend# app/views/blog/index.haml- @posts.each do |post| %article %h1= post.title .content = post.content
  11. 11. SyntaxeÉléments, attributs, code…
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. %article %h1 Titre pour tester %p Du contenu!<article> <h1>Titre pour tester</h1> <p>Du contenu!</p></article>
  21. 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. 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. 23. Désavantages• Courbe d’apprentissage• Processus de compilation• Nouvelles conventions à suivre
  24. 24. SassSyntactically Awesome Stylesheets
  25. 25. • Principes• How-to• Syntaxe• Désavantages
  26. 26. Principes• Don’t repeat yourself (DRY)• 100% backward-compatible avec CSS• Simplifier la vie des développeurs• “Make CSS fun again”
  27. 27. How-toComment ça marche?
  28. 28. $ gem install sass$ sass input.scss output.css
  29. 29. # app.rbget "/css/screen.css" do scss :screenend
  30. 30. SyntaxeVariables, nesting, opérations…
  31. 31. $orange: #ed7225;body { background: $orange; }body { background: #ed7225; }
  32. 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. 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. 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. 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. 36. Désavantages• Mêmes que Haml• Sauf… • Pas de nouvelles conventions • Courbe d’apprentissage facile • Backward-compatible CSS!
  37. 37. Discussion• Est-ce que ça en vaut la peine?• Alternatives pour PHP, Python, …• Slim, Tequila, CoffeeKup, LESS?• CoffeeScript?• Haters?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×