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

(X)HTML Abstraction Markup Language

Why oh why?

ERB = HTML = Tag-Suppe

HTML-Tags = Redundant

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

Magic!

<table> <tr> <td>Hey there</td> </tr></table>

Selbstschließende Tags

<foo/>

Magic!

Automatisch für:‣meta‣ img‣ link‣ script‣ br‣ hr

Whitespace-Kontrolle

%blockquote< %div Foo!

Magic!

%img%img>%img

Magic!

Tag-Attribute

%head{ :name => "doc_head" } %script{ 'type' => "text/" + "javascript", :src => "javascripts/script_#{2 + 7}" }

Magic!

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!

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

Magic!

Ruby FTW!

%p= "Yay".downcase

Magic!

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

Magic!

%p== #{n} Followers

<p>120231373274987476 Followers</p>

Magic!

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

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!

-# this is a comment

Magic!

But wait, there's more!

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

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?

haml / sass and compass

Documents

haml, sass and compass for sane web development

haml, sass & compass

sass & compass - css für fortgeschrittene

sass y compass

how haml, sass and coffeescript can make your life easier

sass & compass / w3ctech shanghai

sass & compass

agile css development with compass/sass

sass & compass @ senchaconf

sass and compass: an introduction

sass & compass (barcamp stuttgart 2012)

finding your way with sass+compass

opencode beta : haml & sass

sass and compass - getting started

liebe dein frontend wie dich selbst! haml & sass & compass &...

haml y sass: html y css dietéticos

sass & compass - drupalcamp cr13

assetic: integrar sass, compass y foundation

curso css3 com sass e compass - aula 04: sass com ide: scout

einführung in sass und compass