Mit hotfixes von Carsten Bormann 2011-02-28, 2012-03-13 HAML und SASS (und COMPASS) markup haiku vs. syntactically awesome stylesheets Tobias Adam, Jan Krutisch mindmatters GmbH & Co. KG
HAML
(X)HTML Abstraction Markup Language
ERB = HTML = Tag-Suppe
HTML-Tags = Redundant
<div> </div>
<div> Redundant! </div>
ERB = Zu Nachsichtig
index.erb <%= render :partial => 'head' %>... <%= render :partial => 'foot' %> _head.erb <body> _foot.erb </body>
installation als rails plugin
> gem install haml > cd rails_app > haml --rails. > echo "gem haml" >>Gemfile > html2haml ex foo.html.erb foo.html.haml
Einfache Tags
%table %tr %td Hey there
%table %tr %td Hey there Magic! <table> <tr> <td>hey there</td> </tr> </table>
Selbstschließende Tags
%foo/ Magic! <foo/>
Automatisch für:! meta! img! link! script! br! hr
Whitespace-Kontrolle
%blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote>
%img %img> %img Magic! <img /><img /><img />
Tag-Attribute
%head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" } Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head>
Attribut-Helper
def html_attrs(lang = 'en-us') { :xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang } end
%html{html_attrs('de-de')} Magic! <html lang='de-de' xml:lang='de-de' xmlns='http://www.w3.org/1999/xhtml'> </html>
IDs und Classes
#eins.zwei #drei.vier Hallo! Magic! <div id="eins"> <div class="zwei"> <div id="drei" class="vier">hallo!</div> </div> </div>
Auto-ID's und Klassen
%ul %li[@book, :foo] Book Magic! <ul> <li class="foo_book" id="foo_book_1"> Book </li> </ul>
Ruby FTW!
%p= "Yay".downcase Magic! <p>yay</p>
%p&= "<b>yay</b>".downcase Magic! <p><b>yay</b></p>
%p== #{n} Followers Magic! <p>120231373274987476 Followers</p>
- [1,2,3].each do i %p= i Magic! <p>1</p> <p>2</p> <p>3</p>
Filter
:markdown Header ====== Hallo, *Welt* Magic! <h1>header</h1> <p>hallo, <em>welt</em>
Filter! plain! javascript! escaped! ruby! preserve! erb! sass! textile! markdown! maruku! roll yer own
Kommentare
/ this is a comment Magic! <!-- This is a comment -->
/[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox! Magic! <!--[if IE]> <a href="http://www.getfirefox.com/"> Get Firefox! </a> <![endif]-->
-# this is a comment
-# this is a comment Magic!
HAML und Rails Im Gemfile: gem haml-rails (automatically enables haml generators)
HAML vs. SLIM Rails node.js HAML JADE SLIM
But wait, there's more!
haml-lang.org http://haml.hamptoncatlin.com/docs/rdoc/classes/haml.html
SASS
Syntactically Awesome StyleSheets
Warum?
Keine Variablen
Keine Abstraktionen
Keine echten Kaskadierungen
stylesheets/sass/screen.sass Magic! stylesheets/screen.css
Die Basics
#main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; }
#main color: #0f0 width: 300px p color: #030 alternative syntax Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; }
Elternreferenz
link a color: #0f0 &:hover color: #0ff Magic! a { color: #0f0; } a:hover { color: #0ff; }
Zusammengesetzte Styles
.box :border :top 1px solid black :bottom 5px solid black Magic!.box { border-top: 1px solid black; border-bottom: 5px solid black; }
Konstanten
Update needed!bg_color = #002244 body :background-color =!bg_color Magic! body { background-color: #002244; }
Achtung!!bg_color = #002244 body :background-color =!bg_color Magic! body { background-color: #002244; }
Arithmetik
!bg_color = #002244 body :background-color =!bg_color + #020202 Magic! body { background-color: #022446; }
Mixins
=standard-border :border 1px solid black :padding 5px #main +standard-border Magic! #main { border: 1px solid black; padding: 5px; }
Output Styles
.box{border-top:1px solid black;border-bottom:5px solid black}body{backgroundcolor:#002244}#main{color:lime;pbackground-color:lime;pcolor:#000000}#main{border:1px solid black;padding:5px} :compressed
Update needed Ausblick (HAML Edge)
Mixin-Argumente
=grid-unit-base(!gutter_width = 50px)
Kontrollstrukturen
@for!n from 1 through 15.grid_#{!n} +grid-width(!n, 15, 200px)
!last = true @if!last +last @else :margin-right = 20px
COMPASS
CSS Meta Framework
CSS-Frameworks! Blueprint! YUI-Grids! 960.gs (als Plugin)! YAML (geplant?)
COMPASS-Module! Reset! Utilities! Layout
SASS vs. LESS LESS ist aus der node.js-gemeinde Twitter Bootstrap basiert auf LESS gem boostrap-sass Jetzt auch im Rails Tutorial :-) (evtl. Kapitel 5 nochmal lesen)