haml / sass and compass
DESCRIPTION
HAML / SASS and COMPASSA presentation held at the rails usergroup hamburg meetup march 2009.TRANSCRIPT
![Page 1: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/1.jpg)
HAML und SASS(und COMPASS)markup haiku vs. syntactically awesome stylesheets
Tobias Adam, Jan Krutischmindmatters GmbH & Co. KG
Donnerstag, 12. März 2009
![Page 2: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/2.jpg)
HAML
Donnerstag, 12. März 2009
![Page 3: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/3.jpg)
(X)HTML Abstraction Markup Language
Donnerstag, 12. März 2009
![Page 4: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/4.jpg)
(X)HTML Abstraction Markup Language
?!
Donnerstag, 12. März 2009
![Page 5: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/5.jpg)
Why oh why?
Donnerstag, 12. März 2009
![Page 6: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/6.jpg)
ERB = HTML = Tag-Suppe
Donnerstag, 12. März 2009
![Page 7: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/7.jpg)
Donnerstag, 12. März 2009
![Page 8: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/8.jpg)
HTML-Tags = Redundant
Donnerstag, 12. März 2009
![Page 9: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/9.jpg)
<div>
</div>
Donnerstag, 12. März 2009
![Page 10: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/10.jpg)
<div>
</div>Redundant!
Donnerstag, 12. März 2009
![Page 11: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/11.jpg)
ERB = Zu Nachsichtig
Donnerstag, 12. März 2009
![Page 12: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/12.jpg)
<%= render :partial => 'head' %>...<%= render :partial => 'foot' %>
<body>
</body>
index.erb
_head.erb
_foot.erb
Donnerstag, 12. März 2009
![Page 13: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/13.jpg)
Donnerstag, 12. März 2009
![Page 14: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/14.jpg)
installation als rails plugin
Donnerstag, 12. März 2009
![Page 15: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/15.jpg)
> gem install haml> cd rails_app> haml --rails .
Donnerstag, 12. März 2009
![Page 16: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/16.jpg)
Butter bei die Fische!
Donnerstag, 12. März 2009
![Page 17: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/17.jpg)
Einfache Tags
Donnerstag, 12. März 2009
![Page 18: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/18.jpg)
%table %tr %td Hey there
Donnerstag, 12. März 2009
![Page 19: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/19.jpg)
%table %tr %td Hey there
Magic!
<table> <tr> <td>Hey there</td> </tr></table>
Donnerstag, 12. März 2009
![Page 20: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/20.jpg)
Selbstschließende Tags
Donnerstag, 12. März 2009
![Page 21: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/21.jpg)
%foo/
<foo/>
Magic!
Donnerstag, 12. März 2009
![Page 22: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/22.jpg)
Automatisch für:‣meta‣ img‣ link‣ script‣ br‣ hr
Donnerstag, 12. März 2009
![Page 23: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/23.jpg)
Whitespace-Kontrolle
Donnerstag, 12. März 2009
![Page 24: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/24.jpg)
%blockquote< %div Foo!
Magic!
<blockquote><div> Foo!</div></blockquote>
Donnerstag, 12. März 2009
![Page 25: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/25.jpg)
%img%img>%img
Magic!
<img /><img /><img />
Donnerstag, 12. März 2009
![Page 26: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/26.jpg)
Tag-Attribute
Donnerstag, 12. März 2009
![Page 27: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/27.jpg)
%head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" }
<head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script></head>
Magic!
Donnerstag, 12. März 2009
![Page 28: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/28.jpg)
Attribut-Helper
Donnerstag, 12. März 2009
![Page 29: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/29.jpg)
def html_attrs(lang = 'en-US') { :xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang }end
Donnerstag, 12. März 2009
![Page 30: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/30.jpg)
%html{html_attrs('de-de')}
<html lang='de-de' xml:lang='de-de' xmlns='http://www.w3.org/1999/xhtml'></html>
Magic!
Donnerstag, 12. März 2009
![Page 31: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/31.jpg)
IDs und Classes
Donnerstag, 12. März 2009
![Page 32: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/32.jpg)
#eins .zwei #drei.vier Hallo!
<div id="eins"> <div class="zwei"> <div id="drei" class="vier">Hallo!</div> </div></div>
Magic!
Donnerstag, 12. März 2009
![Page 33: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/33.jpg)
Auto-ID's und Klassen
Donnerstag, 12. März 2009
![Page 34: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/34.jpg)
%ul %li[@book, :foo] Book
<ul> <li class="foo_book" id="foo_book_1"> Book </li></ul>
Magic!
Donnerstag, 12. März 2009
![Page 35: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/35.jpg)
Ruby FTW!
Donnerstag, 12. März 2009
![Page 36: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/36.jpg)
%p= "Yay".downcase
<p>yay</p>
Magic!
Donnerstag, 12. März 2009
![Page 37: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/37.jpg)
%p&= "<b>Yay</b>".downcase
<p><b>yay</b></p>
Magic!
Donnerstag, 12. März 2009
![Page 38: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/38.jpg)
%p== #{n} Followers
<p>120231373274987476 Followers</p>
Magic!
Donnerstag, 12. März 2009
![Page 39: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/39.jpg)
- [1,2,3].each do |i| %p= i
<p>1</p><p>2</p><p>3</p>
Magic!
Donnerstag, 12. März 2009
![Page 40: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/40.jpg)
Filter
Donnerstag, 12. März 2009
![Page 41: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/41.jpg)
:markdown Header ======
Hallo, *Welt*
<h1>Header</h1>
<p>Hallo, <em>Welt</em>
Magic!
Donnerstag, 12. März 2009
![Page 42: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/42.jpg)
Filter‣ plain‣ javascript‣ escaped‣ ruby‣ preserve‣ erb
‣ sass‣ textile‣markdown‣maruku‣ roll yer own
Donnerstag, 12. März 2009
![Page 43: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/43.jpg)
Kommentare
Donnerstag, 12. März 2009
![Page 44: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/44.jpg)
/ this is a comment
<!-- This is a comment -->
Magic!
Donnerstag, 12. März 2009
![Page 45: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/45.jpg)
/[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox!
<!--[if IE]> <a href="http://www.getfirefox.com/"> Get Firefox! </a> <![endif]-->
Magic!
Donnerstag, 12. März 2009
![Page 46: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/46.jpg)
-# this is a comment
Donnerstag, 12. März 2009
![Page 47: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/47.jpg)
-# this is a comment
Magic!
Donnerstag, 12. März 2009
![Page 48: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/48.jpg)
But wait, there's more!
Donnerstag, 12. März 2009
![Page 49: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/49.jpg)
http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html
Donnerstag, 12. März 2009
![Page 50: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/50.jpg)
SASS
Donnerstag, 12. März 2009
![Page 51: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/51.jpg)
Syntactically Awesome StyleSheets
Donnerstag, 12. März 2009
![Page 52: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/52.jpg)
Warum?
Donnerstag, 12. März 2009
![Page 53: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/53.jpg)
Donnerstag, 12. März 2009
![Page 54: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/54.jpg)
Keine Variablen
Donnerstag, 12. März 2009
![Page 55: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/55.jpg)
Keine Abstraktionen
Donnerstag, 12. März 2009
![Page 56: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/56.jpg)
Keine echten Kaskadierungen
Donnerstag, 12. März 2009
![Page 57: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/57.jpg)
installation als rails-plugin
Donnerstag, 12. März 2009
![Page 58: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/58.jpg)
> gem install haml> cd rails_app> haml --rails .
Donnerstag, 12. März 2009
![Page 59: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/59.jpg)
stylesheets/sass/screen.sass
stylesheets/screen.css
Magic!
Donnerstag, 12. März 2009
![Page 60: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/60.jpg)
Die Basics
Donnerstag, 12. März 2009
![Page 61: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/61.jpg)
Die Basics, Die!
Donnerstag, 12. März 2009
![Page 62: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/62.jpg)
#main :color #0f0 :width 300px p :color #030
#main { color: #0f0; width: 300px; } #main p { color: #030; }
Magic!
Donnerstag, 12. März 2009
![Page 63: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/63.jpg)
#main color: #0f0 width: 300px p color: #030
#main { color: #0f0; width: 300px; } #main p { color: #030; }
Magic!
alternative syntax
Donnerstag, 12. März 2009
![Page 64: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/64.jpg)
(eventuell besser in situationen mit migrationshintergrund)
Donnerstag, 12. März 2009
![Page 65: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/65.jpg)
Elternreferenz
Donnerstag, 12. März 2009
![Page 66: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/66.jpg)
"Elternreferenz"
Donnerstag, 12. März 2009
![Page 67: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/67.jpg)
link color: #0f0 &:hover color: #0ff
a { color: #0f0; } a:hover { color: #0ff; }
Magic!
Donnerstag, 12. März 2009
![Page 68: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/68.jpg)
Zusammengesetzte Styles
Donnerstag, 12. März 2009
![Page 69: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/69.jpg)
.box :border :top 1px solid black :bottom 5px solid black
.box { border-top: 1px solid black; border-bottom: 5px solid black; }
Magic!
Donnerstag, 12. März 2009
![Page 70: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/70.jpg)
Konstanten
Donnerstag, 12. März 2009
![Page 71: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/71.jpg)
!bg_color = #002244body :background-color = !bg_color
body { background-color: #002244; }
Magic!
Donnerstag, 12. März 2009
![Page 72: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/72.jpg)
!bg_color = #002244body :background-color = !bg_color
body { background-color: #002244; }
Magic!
Achtung!
Donnerstag, 12. März 2009
![Page 73: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/73.jpg)
Arithmetik
Donnerstag, 12. März 2009
![Page 74: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/74.jpg)
!bg_color = #002244body :background-color = !bg_color + #020202
body { background-color: #022446; }
Magic!
Donnerstag, 12. März 2009
![Page 75: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/75.jpg)
Mixins
Donnerstag, 12. März 2009
![Page 76: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/76.jpg)
=standard-border :border 1px solid black :padding 5px #main +standard-border
#main { border: 1px solid black; padding: 5px; }
Magic!
Donnerstag, 12. März 2009
![Page 77: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/77.jpg)
@import
Donnerstag, 12. März 2009
![Page 78: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/78.jpg)
Output Styles
Donnerstag, 12. März 2009
![Page 79: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/79.jpg)
.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 solid black;padding:5px}
:compressed
Donnerstag, 12. März 2009
![Page 80: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/80.jpg)
Ausblick (HAML Edge)
Donnerstag, 12. März 2009
![Page 81: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/81.jpg)
Mixin-Argumente
Donnerstag, 12. März 2009
![Page 82: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/82.jpg)
=grid-unit-base(!gutter_width = 50px)
Donnerstag, 12. März 2009
![Page 83: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/83.jpg)
Kontrollstrukturen
Donnerstag, 12. März 2009
![Page 84: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/84.jpg)
@for !n from 1 through 15 .grid_#{!n} +grid-width(!n, 15, 200px)
Donnerstag, 12. März 2009
![Page 85: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/85.jpg)
!last = true@if !last +last@else :margin-right = 20px
Donnerstag, 12. März 2009
![Page 86: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/86.jpg)
COMPASS
Donnerstag, 12. März 2009
![Page 87: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/87.jpg)
CSS Meta Framework
Donnerstag, 12. März 2009
![Page 88: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/88.jpg)
CSS-Frameworks
‣ Blueprint‣ YUI-Grids‣ 960.gs (als Plugin)‣ YAML (geplant?)
Donnerstag, 12. März 2009
![Page 89: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/89.jpg)
COMPASS-Module
‣ Reset‣ Utilities‣ Layout
Donnerstag, 12. März 2009
![Page 90: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/90.jpg)
Installation
Donnerstag, 12. März 2009
![Page 91: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/91.jpg)
> 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
![Page 92: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/92.jpg)
Rails-Integration
Donnerstag, 12. März 2009
![Page 93: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/93.jpg)
> compass --rails .
Donnerstag, 12. März 2009
![Page 94: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/94.jpg)
app/stylesheets/foo.sass
public/stylesheets/compiled/foo.css
Magic!
Donnerstag, 12. März 2009
![Page 95: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/95.jpg)
Beispiel (Blueprint)
Donnerstag, 12. März 2009
![Page 96: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/96.jpg)
artist_header logo_header
bodybody
footerfooter
header
Donnerstag, 12. März 2009
![Page 97: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/97.jpg)
!!! 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
![Page 98: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/98.jpg)
!!! 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
![Page 99: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/99.jpg)
@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
![Page 100: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/100.jpg)
Flexible Grid-Definition
Donnerstag, 12. März 2009
![Page 101: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/101.jpg)
@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
![Page 102: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/102.jpg)
Wegweiser -->
Donnerstag, 12. März 2009
![Page 103: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/103.jpg)
// 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
![Page 104: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/104.jpg)
// 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
![Page 105: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/105.jpg)
Diskussion
Donnerstag, 12. März 2009
![Page 106: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/106.jpg)
Meta-Frameworksinnvoll?
Donnerstag, 12. März 2009
![Page 107: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/107.jpg)
COMPASS = Work in Progress
Donnerstag, 12. März 2009
![Page 108: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/108.jpg)
Wird debugging im Browser schwieriger?
(Ist der Output zu un-dry?)
Donnerstag, 12. März 2009
![Page 109: HAML / SASS and COMPASS](https://reader034.vdocument.in/reader034/viewer/2022042521/547e9754b4af9fda158b5667/html5/thumbnails/109.jpg)
Nicht für jedes Umfeld geeignet?
Donnerstag, 12. März 2009