HAML / SASS and COMPASS

HAML und SASS(und COMPASS)markup haiku vs. syntactically awesome stylesheets

Tobias Adam, Jan Krutischmindmatters GmbH & Co. KG

Donnerstag, 12. März 2009

HAML


(X)HTML Abstraction Markup Language


(X)HTML Abstraction Markup Language

?!


Why oh why?


ERB = HTML = Tag-Suppe



HTML-Tags = Redundant


<div>

</div>


<div>

</div>Redundant!


ERB = Zu Nachsichtig


<%= render :partial => 'head' %>...<%= render :partial => 'foot' %>

<body>

</body>

index.erb

_head.erb

_foot.erb



installation als rails plugin


> gem install haml> cd rails_app> haml --rails .


Butter bei die Fische!


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/

<foo/>

Magic!


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}" }

<head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script></head>

Magic!


Attribut-Helper


def html_attrs(lang = 'en-US') { :xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang }end


http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

%html{html_attrs('de-de')}

<html lang='de-de' xml:lang='de-de' xmlns='http://www.w3.org/1999/xhtml'></html>

Magic!


http://www.w3.org/1999/xhtml'

http://www.w3.org/1999/xhtml'

IDs und Classes


#eins .zwei #drei.vier Hallo!

<div id="eins"> <div class="zwei"> <div id="drei" class="vier">Hallo!</div> </div></div>

Magic!


Auto-ID's und Klassen


%ul %li[@book, :foo] Book

<ul> <li class="foo_book" id="foo_book_1"> Book </li></ul>

Magic!


Ruby FTW!


%p= "Yay".downcase

<p>yay</p>

Magic!


%p&= "<b>Yay</b>".downcase

<p><b>yay</b></p>

Magic!


%p== #{n} Followers

<p>120231373274987476 Followers</p>

Magic!


- [1,2,3].each do |i| %p= i

<p>1</p><p>2</p><p>3</p>

Magic!


Filter


:markdown Header ======

Hallo, *Welt*

<h1>Header</h1>

<p>Hallo, <em>Welt</em>

Magic!


Filter‣ plain‣ javascript‣ escaped‣ ruby‣ preserve‣ erb

‣ sass‣ textile‣markdown‣maruku‣ roll yer own


Kommentare


/ this is a comment



Magic!


/[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox!



Magic!


http://www.getfirefox.com/'

http://www.getfirefox.com/'

http://www.getfirefox.com

http://www.getfirefox.com

-# this is a comment


-# this is a comment

Magic!


But wait, there's more!


http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html





















SASS


Syntactically Awesome StyleSheets


Warum?



Keine Variablen


Keine Abstraktionen


Keine echten Kaskadierungen


installation als rails-plugin


> gem install haml> cd rails_app> haml --rails .


stylesheets/sass/screen.sass

stylesheets/screen.css

Magic!


Die Basics


Die Basics, Die!


#main :color #0f0 :width 300px p :color #030

#main { color: #0f0; width: 300px; } #main p { color: #030; }

Magic!


#main color: #0f0 width: 300px p color: #030

#main { color: #0f0; width: 300px; } #main p { color: #030; }

Magic!

alternative syntax


(eventuell besser in situationen mit migrationshintergrund)


Elternreferenz


"Elternreferenz"


link color: #0f0 &:hover color: #0ff

a { color: #0f0; } a:hover { color: #0ff; }

Magic!


Zusammengesetzte Styles


.box :border :top 1px solid black :bottom 5px solid black

.box { border-top: 1px solid black; border-bottom: 5px solid black; }

Magic!


Konstanten


!bg_color = #002244body :background-color = !bg_color

body { background-color: #002244; }

Magic!


!bg_color = #002244body :background-color = !bg_color


Magic!

Achtung!


Arithmetik


!bg_color = #002244body :background-color = !bg_color + #020202


Magic!


Mixins


=standard-border :border 1px solid black :padding 5px #main +standard-border

#main { border: 1px solid black; padding: 5px; }

Magic!


@import


Output Styles


.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


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


Installation


> 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


Rails-Integration


> compass --rails .


app/stylesheets/foo.sass

public/stylesheets/compiled/foo.css

Magic!


Beispiel (Blueprint)


artist_header logo_header

bodybody

footerfooter

header


!!! 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


!!! 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


@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)


Flexible Grid-Definition


@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)


Wegweiser -->


// 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.


// 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


Diskussion


Meta-Frameworksinnvoll?


COMPASS = Work in Progress


Wird debugging im Browser schwieriger?

(Ist der Output zu un-dry?)


Nicht für jedes Umfeld geeignet?

Documents

HAML / SASS and COMPASS