SlideShare une entreprise Scribd logo
Haml & Sass
       en 10 minutes faciles
Rémi Prévost — 28 juillet 2011, OpenCode (beta)
Même ce gars-là les utilise!
Haml
HTML 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 (Python, anyone?)
•   Pensé pour les développeurs
How-to
Comment ç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.rb
def index
  @posts = Post.all
end


# app/views/blog/index.haml
- @posts.each do |post|
  %article
    %h1= post.title
    .content
      = post.content
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>SOAP</langage>
  <langage>XML-RPC</langage>
</langages>
%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>
%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>
%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>
/ 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>
/[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]-->
%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>
%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>
%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>
</article>
<article>
  <h1>Titre pour tester</h1>
  <p>Du contenu!</p>
</article>
<article>
  <h1>Titre pour tester</h1>
  <p>Du contenu!</p>
</article>
…
%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>
Désavantages
•   Courbe d’apprentissage
•   Processus de compilation
•   Nouvelles conventions à suivre
Sass
Syntactically 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
•   “Make CSS fun again”
How-to
Comment ça marche?
$ gem install sass
$ sass input.scss output.css
# app.rb
get "/css/screen.css" do
  scss :screen
end
Syntaxe
Variables, 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 {
  border: 1px solid #ddd; }

nav li a {
  float: left; }
@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;
}
$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; }
@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"); }
Désavantages
•   Mêmes que Haml
•   Sauf…
    •   Pas de nouvelles conventions
    •   Courbe d’apprentissage facile
    •   Backward-compatible CSS!
Discussion
•   Est-ce que ça en vaut la peine?
•   Alternatives pour PHP, Python, …
•   Slim, Tequila, CoffeeKup, LESS?
•   CoffeeScript?
•   Haters?

Contenu connexe

En vedette

Populações prof. juliana [Introdução à Engenharia Ambiental]
Populações   prof. juliana [Introdução à Engenharia Ambiental]Populações   prof. juliana [Introdução à Engenharia Ambiental]
Populações prof. juliana [Introdução à Engenharia Ambiental]
Lucas Barbosa
 
Casas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-i
Casas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-iCasas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-i
Casas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-i
Edmo Ferreira
 
国際トラベル科 スライドショー
国際トラベル科 スライドショー国際トラベル科 スライドショー
国際トラベル科 スライドショーKazuya Takamatsu
 
Fazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. Lavouras
Fazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. LavourasFazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. Lavouras
Fazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. Lavouras
Edmo Ferreira
 
Labrador
LabradorLabrador
Guía electivo urbanización
Guía electivo urbanizaciónGuía electivo urbanización
Guía electivo urbanización
San Sebastián University
 
Bologna sies 2011
Bologna sies 2011Bologna sies 2011
Bologna sies 2011Voixup
 
Presentation1
Presentation1Presentation1
Presentation1gascoram
 
通訳ガイド科 リンク
通訳ガイド科 リンク通訳ガイド科 リンク
通訳ガイド科 リンクKazuya Takamatsu
 
Fasilitas kita for final
Fasilitas kita for finalFasilitas kita for final
Fasilitas kita for final
ACSK
 
情報発信すること
情報発信すること情報発信すること
情報発信することhaganemetal
 
Show chavo
Show chavoShow chavo
Show chavogascoram
 
Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.
Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.
Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.
Edmo Ferreira
 
Grupo Bilingue
Grupo BilingueGrupo Bilingue
Grupo Bilingue
Jesus Garrido Vegas
 
Цели которые могут объединить украинцев и пути их достижения.
Цели которые могут объединить украинцев и пути их достижения.Цели которые могут объединить украинцев и пути их достижения.
Цели которые могут объединить украинцев и пути их достижения.Корреспондент
 
Livreto legislacao ambiental
Livreto legislacao ambientalLivreto legislacao ambiental
Livreto legislacao ambiental
Paula Tannus
 

En vedette (20)

Populações prof. juliana [Introdução à Engenharia Ambiental]
Populações   prof. juliana [Introdução à Engenharia Ambiental]Populações   prof. juliana [Introdução à Engenharia Ambiental]
Populações prof. juliana [Introdução à Engenharia Ambiental]
 
Casas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-i
Casas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-iCasas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-i
Casas a venda em São Paulo- Franca - Condomínio fechado Villagio da Colina-i
 
国際トラベル科 スライドショー
国際トラベル科 スライドショー国際トラベル科 スライドショー
国際トラベル科 スライドショー
 
Fazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. Lavouras
Fazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. LavourasFazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. Lavouras
Fazenda a venda em minas gerais, araxá, Tapira, 2.390,20 hect. Lavouras
 
Labrador
LabradorLabrador
Labrador
 
Guía electivo urbanización
Guía electivo urbanizaciónGuía electivo urbanización
Guía electivo urbanización
 
Bologna sies 2011
Bologna sies 2011Bologna sies 2011
Bologna sies 2011
 
Presentation1
Presentation1Presentation1
Presentation1
 
通訳ガイド科 リンク
通訳ガイド科 リンク通訳ガイド科 リンク
通訳ガイド科 リンク
 
Fasilitas kita for final
Fasilitas kita for finalFasilitas kita for final
Fasilitas kita for final
 
情報発信すること
情報発信すること情報発信すること
情報発信すること
 
Show chavo
Show chavoShow chavo
Show chavo
 
Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.
Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.
Fazenda a venda em são paulo, ribeirão corrente, 20,5 alq.
 
Sagra dueville
Sagra duevilleSagra dueville
Sagra dueville
 
Grupo Bilingue
Grupo BilingueGrupo Bilingue
Grupo Bilingue
 
Цели которые могут объединить украинцев и пути их достижения.
Цели которые могут объединить украинцев и пути их достижения.Цели которые могут объединить украинцев и пути их достижения.
Цели которые могут объединить украинцев и пути их достижения.
 
Power
PowerPower
Power
 
Manajemen
ManajemenManajemen
Manajemen
 
Livreto legislacao ambiental
Livreto legislacao ambientalLivreto legislacao ambiental
Livreto legislacao ambiental
 
อ31101
อ31101อ31101
อ31101
 

Similaire à OpenCode beta : Haml & Sass

Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
TheBest Icanbe
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
Neovov
 
HTML
HTMLHTML
HTML
Neovov
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
Jean Michel
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
Corinne Schillinger
 
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de  pages HTML, Joël RivestStructurer ses travaux SAS à l'aide de  pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
sasreference
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à SinatraRémi Prévost
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
François-Guillaume Ribreau
 
PHP - get started
PHP - get startedPHP - get started
PHP - get startedmazenovi
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
pefringant
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Sébastien Lejeune
 
CSS 3
CSS 3CSS 3
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
borhen boukthir
 
Statistiques de consultation, comment les utiliser. Vers un observatoire nati...
Statistiques de consultation, comment les utiliser. Vers un observatoire nati...Statistiques de consultation, comment les utiliser. Vers un observatoire nati...
Statistiques de consultation, comment les utiliser. Vers un observatoire nati...
7èmes Rencontres Nationales du etourisme institutionnel
 

Similaire à OpenCode beta : Haml & Sass (20)

Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de  pages HTML, Joël RivestStructurer ses travaux SAS à l'aide de  pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
PHP - get started
PHP - get startedPHP - get started
PHP - get started
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
HTML5
HTML5HTML5
HTML5
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
 
CSS 3
CSS 3CSS 3
CSS 3
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
 
Statistiques de consultation, comment les utiliser. Vers un observatoire nati...
Statistiques de consultation, comment les utiliser. Vers un observatoire nati...Statistiques de consultation, comment les utiliser. Vers un observatoire nati...
Statistiques de consultation, comment les utiliser. Vers un observatoire nati...
 

OpenCode beta : Haml & Sass

  • 1. Haml & Sass en 10 minutes faciles Rémi Prévost — 28 juillet 2011, OpenCode (beta)
  • 2. Même ce gars-là les utilise!
  • 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
  • 7. $ gem install haml $ haml input.haml output.html
  • 8. %ul %li Foo %li Bar <ul> <li>Foo</li> <li>Bar</li> </ul>
  • 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
  • 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
  • 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”
  • 28. $ gem install sass $ sass input.scss output.css
  • 29. # app.rb get "/css/screen.css" do scss :screen end
  • 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?