HAML / SASS and COMPASS

HAML und SASS (und COMPASS) markup haiku vs. syntactically awesome stylesheets Tobias Adam, Jan Krutisch mindmatters GmbH & Co. KG Donnerstag, 12. März 2009

HAML Donnerstag, 12. März 2009

(X)HTML Abstraction Markup Language Donnerstag, 12. März 2009

?! (X)HTML Abstraction Markup Language Donnerstag, 12. März 2009

Why oh why? Donnerstag, 12. März 2009

ERB = HTML = Tag-Suppe Donnerstag, 12. März 2009

Donnerstag, 12. März 2009

HTML-Tags = Redundant Donnerstag, 12. März 2009

<div> </div> Donnerstag, 12. März 2009

<div> Re d und </div>a n t ! Donnerstag, 12. März 2009

ERB = Zu Nachsichtig Donnerstag, 12. März 2009

.e r b de x in <%= render :partial => 'head' %> ... <%= render :partial => 'foot' %> .e r b e ad _h <body> .e r b foo t _ </body> Donnerstag, 12. März 2009

installation als rails plugin Donnerstag, 12. März 2009

> gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009

Butter bei die Fische! Donnerstag, 12. März 2009

Einfache Tags Donnerstag, 12. März 2009

%table %tr %td Hey there Donnerstag, 12. März 2009

%table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Donnerstag, 12. März 2009

Selbstschließende Tags Donnerstag, 12. März 2009

%foo/ Magic! <foo/> Donnerstag, 12. März 2009

Automatisch für: ‣ meta ‣ img ‣ link ‣ script ‣ br ‣ hr Donnerstag, 12. März 2009

Whitespace-Kontrolle Donnerstag, 12. März 2009

%blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Donnerstag, 12. März 2009

%img %img> %img Magic! <img /><img /><img /> Donnerstag, 12. März 2009

Tag-Attribute Donnerstag, 12. März 2009

%head{ :name => quot;doc_headquot; } %script{ 'type' => quot;text/quot; + quot;javascriptquot;, :src => quot;javascripts/script_#{2 + 7}quot; } Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head> Donnerstag, 12. März 2009

Attribut-Helper Donnerstag, 12. März 2009

def html_attrs(lang = 'en-US') { :xmlns => quot;http://www.w3.org/1999/xhtmlquot;, 'xml:lang' => lang, :lang => lang } end Donnerstag, 12. März 2009

%html{html_attrs('de-de')} Magic! <html lang='de-de' xml:lang='de-de' xmlns='http://www.w3.org/1999/xhtml'> </html> Donnerstag, 12. März 2009

IDs und Classes Donnerstag, 12. März 2009

#eins .zwei #drei.vier Hallo! Magic! <div id=quot;einsquot;> <div class=quot;zweiquot;> <div id=quot;dreiquot; class=quot;vierquot;>Hallo!</div> </div> </div> Donnerstag, 12. März 2009

Auto-ID's und Klassen Donnerstag, 12. März 2009

%ul %li[@book, :foo] Book Magic! <ul> <li class=quot;foo_bookquot; id=quot;foo_book_1quot;> Book </li> </ul> Donnerstag, 12. März 2009

Ruby FTW! Donnerstag, 12. März 2009

%p= quot;Yayquot;.downcase Magic! <p>yay</p> Donnerstag, 12. März 2009

%p&= quot;<b>Yay</b>quot;.downcase Magic! <p><b>yay</b></p> Donnerstag, 12. März 2009

%p== #{n} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 12. März 2009

- [1,2,3].each do |i| %p= i Magic! <p>1</p> <p>2</p> <p>3</p> Donnerstag, 12. März 2009

Filter Donnerstag, 12. März 2009

:markdown Header ====== Hallo, *Welt* Magic! <h1>Header</h1> <p>Hallo, <em>Welt</em> Donnerstag, 12. März 2009

Filter ‣ plain ‣ sass ‣ javascript ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ roll yer own ‣ erb Donnerstag, 12. März 2009

Kommentare Donnerstag, 12. März 2009

/ this is a comment Magic!  Donnerstag, 12. März 2009

/[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox! Magic!  Donnerstag, 12. März 2009

-# this is a comment Donnerstag, 12. März 2009

-# this is a comment Magic! Donnerstag, 12. März 2009

But wait, there's more! Donnerstag, 12. März 2009

classes/Haml.html atlin.com/docs/rdoc/ http://haml.hamptonc Donnerstag, 12. März 2009

SASS Donnerstag, 12. März 2009

Syntactically Awesome StyleSheets Donnerstag, 12. März 2009

Warum? Donnerstag, 12. März 2009

Keine Variablen Donnerstag, 12. März 2009

Keine Abstraktionen Donnerstag, 12. März 2009

Keine echten Kaskadierungen Donnerstag, 12. März 2009

installation als rails- plugin Donnerstag, 12. März 2009

> gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009

stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 12. März 2009

Die Basics Donnerstag, 12. März 2009

Die Basics, Die! Donnerstag, 12. März 2009

#main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 12. März 2009

a l te rna #main t i ve color: #0f0 syn width: 300px tax p color: #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 12. März 2009

( eventuell besser in situationen mit migrationshintergrund ) Donnerstag, 12. März 2009

Elternreferenz Donnerstag, 12. März 2009

quot;Elternreferenzquot; Donnerstag, 12. März 2009

link color: #0f0 &:hover color: #0ff Magic! a{ color: #0f0; } a:hover { color: #0ff; } Donnerstag, 12. März 2009

Zusammengesetzte Styles Donnerstag, 12. März 2009

.box :border :top 1px solid black :bottom 5px solid black Magic! .box { border-top: 1px solid black; border-bottom: 5px solid black; } Donnerstag, 12. März 2009

Konstanten Donnerstag, 12. März 2009

!bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009

ng! htu Ac !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009

Arithmetik Donnerstag, 12. März 2009

!bg_color = #002244 body :background-color = !bg_color + #020202 Magic! body { background-color: #022446; } Donnerstag, 12. März 2009

Mixins Donnerstag, 12. März 2009

=standard-border :border 1px solid black :padding 5px #main +standard-border Magic! #main { border: 1px solid black; padding: 5px; } Donnerstag, 12. März 2009

@import Donnerstag, 12. März 2009

Output Styles Donnerstag, 12. März 2009

.box{border-top:1px solid black;border-bottom:5px solid black}body{background- color:#002244}#main{color:lime;p- background-color:lime;p- color:#000000}#main{border:1px d s se solid black;padding:5px} p re om :c Donnerstag, 12. März 2009

Ausblick (HAML Edge) Donnerstag, 12. März 2009

Mixin-Argumente Donnerstag, 12. März 2009

=grid-unit-base(!gutter_width = 50px) Donnerstag, 12. März 2009

Kontrollstrukturen Donnerstag, 12. März 2009

@for !n from 1 through 15 .grid_#{!n} +grid-width(!n, 15, 200px) Donnerstag, 12. März 2009

!last = true @if !last +last @else :margin-right = 20px Donnerstag, 12. März 2009

COMPASS Donnerstag, 12. März 2009

CSS Meta Framework Donnerstag, 12. März 2009

CSS-Frameworks ‣ Blueprint ‣ YUI-Grids ‣ 960.gs (als Plugin) ‣ YAML (geplant?) Donnerstag, 12. März 2009

COMPASS-Module ‣ Reset ‣ Utilities ‣ Layout Donnerstag, 12. März 2009

Installation Donnerstag, 12. März 2009

> git clone git://github.com/nex3/haml.git > cd haml > sudo rake install > gem sources --add http://gems.github.com/ > sudo gem install chriseppstein-compass Donnerstag, 12. März 2009

Rails-Integration Donnerstag, 12. März 2009

> compass --rails . Donnerstag, 12. März 2009

app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 12. März 2009

Beispiel (Blueprint) Donnerstag, 12. März 2009

header artist_header logo_header body footer Donnerstag, 12. März 2009

!!! Strict %html{html_attrs('de-de')} %head = stylesheet_link_tag 'compiled/screen.css' /[if IE] = stylesheet_link_tag 'compiled/ie.css' %body .container #header.span-24 #artist_header.span-6 %h1 Foo #logo_header.span-18.last %h2 Bar #body.span-24 = yield #footer.span-24 Donnerstag, 12. März 2009

!!! Strict %html{html_attrs('de-de')} %head = stylesheet_link_tag 'compiled/screen.css' /[if IE] = stylesheet_link_tag 'compiled/ie.css' %body #container #header #artist_header %h1 Foo #logo_header %h2 Bar #body = yield #footer Donnerstag, 12. März 2009

@import compass/reset.sass @import blueprint/modules/grid.sass #container +container #header +column(24, true) #artist_header +column(6) #logo_header +column(18, true) #body +column(24, true) #footer +column(24, true) Donnerstag, 12. März 2009

Flexible Grid-Deﬁnition Donnerstag, 12. März 2009

@import compass/reset.sass @import blueprint/modules/grid.sass !blueprint_grid_columns = 10 !blueprint_grid_width = 60px !blueprint_grid_margin = 10px #container +container #header +column(24, true) #artist_header +column(6) #logo_header +column(18, true) #body +column(24, true) #footer +column(24, true) Donnerstag, 12. März 2009

Wegweiser --> Donnerstag, 12. März 2009

// Clearing floats without extra markup // Simple Clearing of Floats // [...] =clearfix :overflow auto :overflow -moz-scrollbars-none // This makes ie6 get layout :display inline-block // and this puts it back to block & :display block discuss. Donnerstag, 12. März 2009

// Hides html text and replaces it with an image. // If you use this on an inline element, you will // need to change the display to block or inline-block. =replace-text( !img, !x = 50%, !y = 50% ) :text-indent -9999em :overflow hidden :background :image= url(!img) :repeat no-repeat :position= !x !y Donnerstag, 12. März 2009

Diskussion Donnerstag, 12. März 2009

Meta-Framework sinnvoll? Donnerstag, 12. März 2009

COMPASS = Work in Progress Donnerstag, 12. März 2009

Wird debugging im Browser schwieriger? (Ist der Output zu un-dry?) Donnerstag, 12. März 2009

Nicht für jedes Umfeld geeignet? Donnerstag, 12. März 2009

http://www.mindmatters.de	56
http://coderwall.com	55
http://www.slideshare.net	15
http://mindmatters.domainfactory-kunde.de	6
http://mindmatters.de	4
http://www.health.medicbd.com	1

HAML / SASS and COMPASS

by jan_mindmatters

Accessibility

Upload Details

Usage Rights

6 Embeds 137

Statistics

HAML / SASS and COMPASS Presentation Transcript