opencode beta : haml & sass
TRANSCRIPT
![Page 1: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/1.jpg)
Haml & Sassen 10 minutes faciles
Rémi Prévost — 28 juillet 2011, OpenCode (beta)
![Page 2: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/2.jpg)
Même ce gars-là les utilise!
![Page 3: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/3.jpg)
HamlHTML Abstraction Markup Language
![Page 4: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/4.jpg)
• Principes• How-to• Syntaxe• Désavantages
![Page 5: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/5.jpg)
• 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
![Page 6: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/6.jpg)
How-toComment ça marche?
![Page 7: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/7.jpg)
$ gem install haml$ haml input.haml output.html
![Page 8: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/8.jpg)
%ul %li Foo %li Bar
<ul> <li>Foo</li> <li>Bar</li></ul>
![Page 9: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/9.jpg)
Haml::Engine.new("%h1 Booya!").render=> "<h1>Booya!</h1>"
![Page 10: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/10.jpg)
# 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
![Page 11: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/11.jpg)
SyntaxeÉléments, attributs, code…
![Page 12: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/12.jpg)
%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>
![Page 13: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/13.jpg)
%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>
![Page 14: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/14.jpg)
%table %tr %th Nom %th Prénom %th Courriel %tr %td Prévost %td Rémi %td [email protected]
<table> <tr> <th>Nom</th> <th>Prénom</th> <th>Courriel</th> </tr> <tr> <td>Prévost</td> <td>Rémi</td> <td>[email protected]</td> </tr></table>
![Page 15: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/15.jpg)
%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>
![Page 16: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/16.jpg)
/ 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>
![Page 17: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/17.jpg)
/[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]-->
![Page 18: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/18.jpg)
%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>
![Page 19: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/19.jpg)
%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>
![Page 20: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/20.jpg)
%article %h1 Titre pour tester %p Du contenu!
<article> <h1>Titre pour tester</h1> <p>Du contenu!</p></article>
![Page 21: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/21.jpg)
- 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>…
![Page 22: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/22.jpg)
%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>
![Page 23: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/23.jpg)
• Courbe d’apprentissage• Processus de compilation• Nouvelles conventions à suivre
Désavantages
![Page 24: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/24.jpg)
SassSyntactically Awesome Stylesheets
![Page 25: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/25.jpg)
• Principes• How-to• Syntaxe• Désavantages
![Page 26: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/26.jpg)
• Don’t repeat yourself (DRY)
• 100% backward-compatible avec CSS• Simplifier la vie des développeurs• “Make CSS fun again”
Principes
![Page 27: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/27.jpg)
How-toComment ça marche?
![Page 28: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/28.jpg)
$ gem install sass$ sass input.scss output.css
![Page 29: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/29.jpg)
# app.rbget "/css/screen.css" do scss :screenend
![Page 30: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/30.jpg)
SyntaxeVariables, nesting, opérations…
![Page 31: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/31.jpg)
$orange: #ed7225;body { background: $orange; }
body { background: #ed7225; }
![Page 32: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/32.jpg)
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; }
![Page 33: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/33.jpg)
@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;}
![Page 34: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/34.jpg)
$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; }
![Page 35: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/35.jpg)
@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"); }
![Page 36: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/36.jpg)
• Mêmes que Haml• Sauf…
• Pas de nouvelles conventions• Courbe d’apprentissage facile• Backward-compatible CSS!
Désavantages
![Page 37: OpenCode beta : Haml & Sass](https://reader033.vdocuments.mx/reader033/viewer/2022052323/5584b28bd8b42a96768b4761/html5/thumbnails/37.jpg)
Discussion• Est-ce que ça en vaut la peine?• Alternatives pour PHP, Python, …• Slim, Tequila, CoffeeKup, LESS?• CoffeeScript?• Haters?