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
為你自己學 Python - 冷知識篇
eddie
1
350
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
はじめてのMaterial3 Expressive
ym223
2
740
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
220
1から理解するWeb Push
dora1998
7
1.9k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
310
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
180
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
170
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
個人軟體時代
ethanhuang13
0
320
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
32
14k
Scaling GitHub
holman
463
140k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing for Performance
lara
610
69k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
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?