Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less

Liebe Dein Frontend
wie Dich selbst.

haml & sass & compass & less
02.09.2009
Rails-Konferenz 2009
Jan Krutisch <jan.krutisch@mindmatters.de>
mindmatters GmbH & Co. KG

Donnerstag, 3. September 2009

(disclaimer)


HAML


http://haml-lang.com/


(X)HTML Abstraction
Markup Language


Nur 'ne neue
Template-Engine?


Nix.


Mächtig.

Flexibel.


Ausreichend schnell.


ABER!


mirscheissegal


1) Ich habe Kontrolle
über meinen
Template-Code


2) Ich bin ein
disziplinierter Coder


3) Ich schreib mein
HTML selber.


Andere Sichtweise


(x)HTML
=
XML


Tagsoup

Text


HTML-Tags =
Redundanz


<div>
Re d
und
</div> an t
!


ERB = Zu Nachsichtig


(Zu agnostisch)


de x .e r b
in <%= render :partial => 'head' %>
...
<%= render :partial => 'foot' %>
e ad .e r b
_h
<body>

foo t .e r b
_
</body>


found via google search, source unknown

"There must be
a better way"™


Abstrahieren!


Kompakt


Keine Redundanzen


Wacht über die
Dokumentenstruktur


Gibt tollen HTML-
Code aus.


installation als gem
&
rails plugin


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


(Library/
commandline tool)


Tags!


%table
%tr
%td Hey there


%table
%tr
%td Hey there

Magic!

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


%table
%tr
%td
Hey there

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


Self-closing tags


%foo/
Magic!

<foo/>


automagisch für:
•meta
•img
•link
•script
•br
•hr

Whitespace control


(für die dämlichen
Browserbugs)


%blockquote<
%div
Foo!

Magic!

<blockquote><div>
Foo!
</div></blockquote>


%img
%img>
%img
Magic!

<img /><img /><img />


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>


%head{ :name => "doc_head" } De p
%script{ 'type' => "text/" + "javascript", re c at
:src => "javascripts/script_#{2 + 7}" }
e d!
Magic!

</script>
</head>


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

Magic!

</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(lang = 'de-DE')}

Magic!

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


Spezialgelagerter
Sonderfall:


IDs & Klassen


#aye_dee
.klazz
Aha!

Magic!

<div id='aye_dee'>
<div class='klazz'>
Aha!
</div>
</div>


Ruby!


%p= "Yay".downcase

Magic!

<p>yay</p>


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

Magic!

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


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

Magic!

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


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

Magic!

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


:escape_html


%p== #{followers} Followers

Magic!

<p>120231373274987476 Followers</p>


De p
re
%p== #{followers} Followers c a t
e d!
Magic!

<p>120231373274987476 Followers</p>


%p #{followers} Followers

Magic!

<p>120231373274987476 Followers</p>


(siehe oben)


%pre~ "YaynHey".downcase

Magic!

<pre>yay
hey</pre>


%ul
- %w{one two three}.each do |word|
%li= word

Magic!
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>


Auto-IDs und -Klassen


%ul
- ['foo', 'bar'].each do |el|
%li[el]= el

Magic!
<ul>
<li class='string' id='string_2970900'>foo</li>
<li class='string' id='string_2970890'>bar</li>
</ul>


Filter


:textile
h1. Header

Hello _world_

Magic!
<h1>Header</h1>

<p>Hello <em>world</em></p>


Verfügbare Filter
‣ plain ‣ sass
‣ javascript ‣ textile
‣ escaped ‣ markdown
‣ ruby ‣ maruku
‣ preserve ‣ cdata
‣ erb ‣ roll yer own


Kommentare


/ This is a comment

Magic!

/[if IE]
%a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
%h1 Get Firefox!

Magic!

-# A silent comment


-# A silent comment

Magic!


Und viel mehr.


atlin.com/docs/rdoc/ classes/Haml.html
http://haml.hamptonc

F.A.Q.


Performance


Ohne Rails


require 'rubygems'
require 'haml'
template = open('simple.haml').read
engine = Haml::Engine.new(template)
puts engine.render


template = <<END
%h1= foo
END
obj = Object.new
engine =
Haml::Engine.new(template).def_method(obj, :render, :foo)
puts obj.render(:foo => 'bar')


Migration


SASS

http://sass-lang.com/


Syntactically
Awesome StyleSheets


Warum?


Keine Variablen/
Konstanten


Keine Abstraktionen


Kein „echtes“
Kaskadieren


Ein paar überﬂüssige
Zeichen


Installation


(kommt mit haml)


stylesheets/sass/screen.sass
Magic!

stylesheets/screen.css


Simples


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

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


a l te
#main rna
color: #0f0 t i ve
syn
width: 300px
p tax
color: #030

Magic!

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


(
Könnte sinnvoll sein in Situationen mit
Migrationshintergrund.
)


References
on parent


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

Magic!

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


#sidebar
:float left
:margin-left 20%
.ie6 &
:margin-left 40%

Magic!
#sidebar {
float: left;
margin-left: 20%; }
.ie6 #sidebar {
margin-left: 40%; }


Compound
styles


.black-border
:border
:color #000
:width 2px
:style solid

Magic!
.black-border {
border-color: #000;
border-width: 2px;
border-style: solid; }


Konstanten


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

Magic!
body {
background-color: #002244; }


Ach t u
ng!
!bg_color = #002244
body
:background-color = !bg_color

Magic!
body {
background-color: #002244; }


Berechnungen


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

Magic!
body {
color: #022446; }


Mixins


=standard-border
:border 1px solid black
#main
+standard-border
:padding 5px
Magic!
#main {
border: 1px solid black;
padding: 5px; }


Mixin-Argumente


=border(!color = #000)
:border 1px solid
:color = !color
#foo
+border(#fea)


Kontrollstrukturen


@for !n from 1 through 6
h#{!n}
:padding 0
:margin 0


!shall_we = false

@if !shall_we
body
:background-color yellow
@else
body
:display none


@import


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

e ss ed
c om pr
:


File caching


Reload-Verhalten


Benutzung ohne Rails


require 'rubygems'
require 'sass'

template = open('simple.sass').read
sass_engine = Sass::Engine.new(template)
output = sass_engine.render
puts output


COMPASS


CSS meta framework


CSS-Frameworks

•Blueprint
•YUI-Grids
•960.gs
•YAML


COMPASS-Module

•Reset
•Utilities
•Layout


> 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

Magic!

public/stylesheets/compiled/foo.css


Beispiel (Blueprint)


header

artist_header logo_header

body

footer


!!! 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 Raster-
Deﬁnitionen


(try that, blueprint!)


@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(10, true)

#artist_header
+column(6)

#logo_header
+column(4, true)

#body
+column(10, true)

#footer
+column(10, true)


Duplikation im
generierten Code


Kompatibilität
zwischen Frameworks


Work in progress


Fragen?


{less}


Motivation


Syntax


css = less


> sudo gem install less


Rails


> script/plugin install
> git://github.com/augustl/less-for-rails.git


public/stylesheets/foo.less
>>>
public/stylesheets/foo.css


Production vs. Dev


It is very fabolous,
and the plugin has won many prizes for this.

[sic]


Variablen


@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }


.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}


Nested rules


#header {
color: black;

.navigation {
font-size: 12px;
}
.logo {
width: 300px;
:hover { text-decoration: none }
}
}


Operations


@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;


Namespaces /
Accessors


#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle > .button;
}


#defaults {
@width: 960px;
@color: black;
}

.article { color: #294366; }

.comment {
width: #defaults[@width];
color: .article['color'];
}


Scope


@var: red;

#page {
@var: white;
#header {
color: @var; // white
}
}


/* One hell of a comment */
@var: red;

// Get in line!
@var: white;


@import "library";
@import "typo.css";


discuss.


http://twitter.com/halfbyte
http://github.com/halfbyte
http://www.ﬂickr.com/photos/jankrutisch/

dangge.


Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less

Recommended

Recommended

More Related Content

Similar to Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less

Similar to Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less (9)

More from jan_mindmatters

More from jan_mindmatters (9)

Recently uploaded

Recently uploaded (20)

Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less