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
430
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
21
Building a strong and explicit engineering culture
remi
0
220
Dispatch, a quick overview of neat Elixir features
remi
1
240
Ecto Embedded Schemas
remi
0
320
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
420
Introduction à RSpec
remi
5
320
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
660
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
780
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
180
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
効率的な開発手段として VRTを活用する
ishkawa
0
150
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Language of Interfaces
destraynor
158
25k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Site-Speed That Sticks
csswizardry
10
700
RailsConf 2023
tenderlove
30
1.1k
Raft: Consensus for Rubyists
vanstee
140
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
BBQ
matthewcrist
89
9.7k
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?