Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Haml & Sass en 10 minutes faciles
Search
Rémi Prévost
July 28, 2011
Programming
4
440
Haml & Sass en 10 minutes faciles
Présentation donnée le 28 juillet 2011 à l’édition bêta de l’OpenCode (Québec).
Rémi Prévost
July 28, 2011
Tweet
Share
More Decks by Rémi Prévost
See All by Rémi Prévost
Le futur du rôle de développeur·euse dans l’écosystème numérique
remi
0
25
Building a strong and explicit engineering culture
remi
0
230
Dispatch, a quick overview of neat Elixir features
remi
1
250
Ecto Embedded Schemas
remi
0
330
Constance et qualité du code dans une équipe
remi
0
310
Développement Web Moderne — méthodes de travail et principes éprouvés
remi
1
560
tmux, teamocil & friends
remi
1
420
RSpec: natural behavior testing for Rails applications
remi
3
430
Introduction à RSpec
remi
5
320
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
900
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
420
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
320
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
490
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
CSC305 Lecture 03
javiergs
PRO
0
230
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
890
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
139
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
4 Signs Your Business is Dying
shpigford
185
22k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
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
• 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
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
[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>
%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>
• Courbe d’apprentissage • Processus de compilation • Nouvelles conventions
à suivre Désavantages
Sass Syntactically Awesome Stylesheets
• Principes • How-to • Syntaxe • Désavantages
• Don’t repeat yourself (DRY) • 100% backward-compatible avec CSS
• Simplifier la vie des développeurs • “Make CSS fun again” Principes
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"); }
• Mêmes que Haml • Sauf… • Pas de nouvelles
conventions • Courbe d’apprentissage facile • Backward-compatible CSS! Désavantages
Discussion • Est-ce que ça en vaut la peine? •
Alternatives pour PHP, Python, … • Slim, Tequila, CoffeeKup, LESS? • CoffeeScript? • Haters?