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
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
430
Introduction à RSpec
remi
5
320
Other Decks in Programming
See All in Programming
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
850
Swift Updates - Learn Languages 2025
koher
2
470
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
AIでLINEスタンプを作ってみた
eycjur
1
230
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
アセットのコンパイルについて
ojun9
0
120
Kiroで始めるAI-DLC
kaonash
2
580
Namespace and Its Future
tagomoris
6
700
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
How to Ace a Technical Interview
jacobian
279
23k
A Tale of Four Properties
chriscoyier
160
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How GitHub (no longer) Works
holman
315
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
4 Signs Your Business is Dying
shpigford
184
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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?