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
350
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
Building a strong and explicit engineering culture
remi
0
190
Dispatch, a quick overview of neat Elixir features
remi
1
130
Ecto Embedded Schemas
remi
0
230
Constance et qualité du code dans une équipe
remi
0
250
Développement Web Moderne — méthodes de travail et principes éprouvés
remi
1
510
tmux, teamocil & friends
remi
1
380
RSpec: natural behavior testing for Rails applications
remi
3
370
Introduction à RSpec
remi
5
300
Her
remi
3
300
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
370
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Domain-Driven Transformation
hschwentner
2
1.5k
Java 22 Overview
kishida
1
190
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Code Reviews
bkuhlmann
4
900
Git Lint
bkuhlmann
4
760
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Navigating Team Friction
lara
179
13k
Code Review Best Practice
trishagee
56
15k
Designing the Hi-DPI Web
ddemaree
276
33k
Visualization
eitanlees
137
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Why Our Code Smells
bkeepers
PRO
331
56k
KATA
mclloyd
16
12k
BBQ
matthewcrist
80
8.8k
A Tale of Four Properties
chriscoyier
152
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
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?