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

184
wie Dich selbst. Liebe Dein Frontend haml & sass & compass & less 02.09.2009 Rails-Konferenz 2009 Jan Krutisch <[email protected] > mindmatters GmbH & Co. KG Donnerstag, 3. September 2009

description

This is the german version of my presentation on HAML, SASS and COMPASS.I added an additional section on lesscss

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

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

wie Dich selbst.Liebe Dein Frontend

haml & sass & compass & less02.09.2009Rails-Konferenz 2009Jan Krutisch <[email protected]>mindmatters GmbH & Co. KG

Donnerstag, 3. September 2009

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

(disclaimer)

Donnerstag, 3. September 2009

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

HAML

Donnerstag, 3. September 2009

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

http://haml-lang.com/

Donnerstag, 3. September 2009

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

(X)HTML Abstraction Markup Language

Donnerstag, 3. September 2009

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

Nur 'ne neue Template-Engine?

Donnerstag, 3. September 2009

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

<em><% "was ist falsch an erb or erubis?" %></em>

Donnerstag, 3. September 2009

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

Nix.

Donnerstag, 3. September 2009

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

Mächtig.

Donnerstag, 3. September 2009

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

Flexibel.

Donnerstag, 3. September 2009

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

Ausreichend schnell.

Donnerstag, 3. September 2009

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

ABER!

Donnerstag, 3. September 2009

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

mirscheissegal

Donnerstag, 3. September 2009

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

1) Ich habe Kontrolle über meinen Template-Code

Donnerstag, 3. September 2009

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

2) Ich bin ein disziplinierter Coder

Donnerstag, 3. September 2009

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

3) Ich schreib mein HTML selber.

Donnerstag, 3. September 2009

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

Andere Sichtweise

Donnerstag, 3. September 2009

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

(x)HTML =XML

Donnerstag, 3. September 2009

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

Text

Tagsoup

Donnerstag, 3. September 2009

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

HTML-Tags = Redundanz

Donnerstag, 3. September 2009

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

<div>

</div>

Donnerstag, 3. September 2009

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

<div>

</div>Redundant!

Donnerstag, 3. September 2009

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

ERB = Zu Nachsichtig

Donnerstag, 3. September 2009

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

(Zu agnostisch)

Donnerstag, 3. September 2009

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

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

<body>

</body>

index.erb

_head.erb

_foot.erb

Donnerstag, 3. September 2009

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

found via google search, source unknownDonnerstag, 3. September 2009

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

"There must bea better way"™

Donnerstag, 3. September 2009

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

Abstrahieren!

Donnerstag, 3. September 2009

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

HAML

Donnerstag, 3. September 2009

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

Kompakt

Donnerstag, 3. September 2009

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

Keine Redundanzen

Donnerstag, 3. September 2009

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

Wacht über die Dokumentenstruktur

Donnerstag, 3. September 2009

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

Gibt tollen HTML-Code aus.

Donnerstag, 3. September 2009

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

installation als gem& rails plugin

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

(Library/commandline tool)

Donnerstag, 3. September 2009

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

Tags!

Donnerstag, 3. September 2009

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

%table %tr %td Hey there

Donnerstag, 3. September 2009

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

%table %tr %td Hey there

Magic!

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

Donnerstag, 3. September 2009

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

%table %tr %td Hey there

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

Donnerstag, 3. September 2009

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

Self-closing tags

Donnerstag, 3. September 2009

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

%foo/

<foo/>

Magic!

Donnerstag, 3. September 2009

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

automagisch für:

•meta

•img

•link

•script

•br

•hr

Donnerstag, 3. September 2009

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

Whitespace control

Donnerstag, 3. September 2009

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

(für die dämlichen Browserbugs)

Donnerstag, 3. September 2009

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

%blockquote< %div Foo!

Magic!

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

Donnerstag, 3. September 2009

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

%img%img>%img

Magic!

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

Donnerstag, 3. September 2009

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

Attribute!

Donnerstag, 3. September 2009

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

%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, 3. September 2009

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

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

Deprecated!

Donnerstag, 3. September 2009

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

%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, 3. September 2009

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

Attribut-Helper

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

Magic!

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

%html{html_attrs(lang = 'de-DE')}

Donnerstag, 3. September 2009

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

Spezialgelagerter Sonderfall:

Donnerstag, 3. September 2009

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

IDs & Klassen

Donnerstag, 3. September 2009

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

Magic!

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

#aye_dee .klazz Aha!

Donnerstag, 3. September 2009

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

Ruby!

Donnerstag, 3. September 2009

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

Magic!

<p>yay</p>

%p= "Yay".downcase

Donnerstag, 3. September 2009

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

Magic!

<p>&lt;b&gt;yay&lt;/b&gt;</p>

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

Donnerstag, 3. September 2009

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

Magic!

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

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

Donnerstag, 3. September 2009

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

Magic!

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

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

Donnerstag, 3. September 2009

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

Magic!

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

<p>&lt;b&gt;yay&lt;/b&gt;</p>

Donnerstag, 3. September 2009

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

:escape_html

Donnerstag, 3. September 2009

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

Magic!

<p>120231373274987476 Followers</p>

%p== #{followers} Followers

Donnerstag, 3. September 2009

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

Magic!

<p>120231373274987476 Followers</p>

%p== #{followers} FollowersDeprecated!

Donnerstag, 3. September 2009

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

Magic!

<p>120231373274987476 Followers</p>

%p #{followers} Followers

Donnerstag, 3. September 2009

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

(siehe oben)

Donnerstag, 3. September 2009

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

Magic!

<pre>yay&#x000A;hey</pre>

%pre~ "Yay\nHey".downcase

Donnerstag, 3. September 2009

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

Magic!

<p>one</p><p>two</p><p>three</p>

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

Donnerstag, 3. September 2009

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

Auto-IDs und -Klassen

Donnerstag, 3. September 2009

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

Magic!

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

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

Donnerstag, 3. September 2009

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

Filter

Donnerstag, 3. September 2009

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

Magic!

<h1>Header</h1>

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

:textile h1. Header Hello _world_

Donnerstag, 3. September 2009

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

Verfügbare Filter

‣ plain

‣ javascript

‣ escaped

‣ ruby

‣ preserve

‣ erb

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

Donnerstag, 3. September 2009

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

Kommentare

Donnerstag, 3. September 2009

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

Magic!

/ This is a comment

<!-- This is a comment -->

Donnerstag, 3. September 2009

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

Magic!<!--[if IE]> <a href="http://www.getfirefox.com/"> Get Firefox! </a> <![endif]-->

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

Donnerstag, 3. September 2009

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

-# A silent comment

Donnerstag, 3. September 2009

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

Magic!

-# A silent comment

Donnerstag, 3. September 2009

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

Und viel mehr.

Donnerstag, 3. September 2009

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

F.A.Q.

Donnerstag, 3. September 2009

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

Performance

Donnerstag, 3. September 2009

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

Ohne Rails

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

Migration

Donnerstag, 3. September 2009

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

SASS

Donnerstag, 3. September 2009

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

http://sass-lang.com/

Donnerstag, 3. September 2009

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

Syntactically Awesome StyleSheets

Donnerstag, 3. September 2009

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

Warum?

Donnerstag, 3. September 2009

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

found via google search, source unknownDonnerstag, 3. September 2009

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

Warum?

Donnerstag, 3. September 2009

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

Keine Variablen/ Konstanten

Donnerstag, 3. September 2009

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

Keine Abstraktionen

Donnerstag, 3. September 2009

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

Kein „echtes“ Kaskadieren

Donnerstag, 3. September 2009

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

Ein paar überflüssige Zeichen

Donnerstag, 3. September 2009

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

Installation

Donnerstag, 3. September 2009

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

(kommt mit haml)

Donnerstag, 3. September 2009

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

stylesheets/sass/screen.sass

stylesheets/screen.css

Magic!

Donnerstag, 3. September 2009

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

Simples

Donnerstag, 3. September 2009

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

Magic!

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

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

Donnerstag, 3. September 2009

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

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

Magic!

alternative syntax

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

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

Referenceson parent

Donnerstag, 3. September 2009

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

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

Magic!

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

Donnerstag, 3. September 2009

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

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

Magic!

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

Donnerstag, 3. September 2009

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

Compoundstyles

Donnerstag, 3. September 2009

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

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

Magic!

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

Donnerstag, 3. September 2009

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

Konstanten

Donnerstag, 3. September 2009

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

!bg_color = #002244body :color = !bg_color

body { background-color: #002244; }

Magic!

Donnerstag, 3. September 2009

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

!bg_color = #002244body :color = !bg_color

body { background-color: #002244; }

Magic!

Achtung!

Donnerstag, 3. September 2009

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

Berechnungen

Donnerstag, 3. September 2009

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

body { background-color: #022446; }

Magic!

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

Donnerstag, 3. September 2009

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

Mixins

Donnerstag, 3. September 2009

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

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

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

Donnerstag, 3. September 2009

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

Mixin-Argumente

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

Kontrollstrukturen

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

!shall_we = false

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

Donnerstag, 3. September 2009

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

@import

Donnerstag, 3. September 2009

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

Ausgabe-Styles

Donnerstag, 3. September 2009

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

:compressed

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

Donnerstag, 3. September 2009

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

F.A.Q.

Donnerstag, 3. September 2009

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

Performance

Donnerstag, 3. September 2009

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

File caching

Donnerstag, 3. September 2009

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

Reload-Verhalten

Donnerstag, 3. September 2009

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

Benutzung ohne Rails

Donnerstag, 3. September 2009

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

require 'rubygems'require 'sass'

template = open('simple.sass').readsass_engine = Sass::Engine.new(template)output = sass_engine.renderputs output

Donnerstag, 3. September 2009

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

COMPASS

Donnerstag, 3. September 2009

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

CSS meta framework

Donnerstag, 3. September 2009

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

CSS-Frameworks

•Blueprint

•YUI-Grids

•960.gs

•YAML

Donnerstag, 3. September 2009

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

COMPASS-Module

•Reset

•Utilities

•Layout

Donnerstag, 3. September 2009

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

Installation

Donnerstag, 3. September 2009

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

> 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, 3. September 2009

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

Rails-Integration

Donnerstag, 3. September 2009

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

> compass --rails .

Donnerstag, 3. September 2009

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

app/stylesheets/foo.sass

public/stylesheets/compiled/foo.css

Magic!

Donnerstag, 3. September 2009

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

Beispiel (Blueprint)

Donnerstag, 3. September 2009

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

artist_header logo_header

bodybody

footerfooter

header

Donnerstag, 3. September 2009

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

!!! 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, 3. September 2009

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

!!! 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, 3. September 2009

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

@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, 3. September 2009

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

Flexible Raster-Definitionen

Donnerstag, 3. September 2009

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

(try that, blueprint!)

Donnerstag, 3. September 2009

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

@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, 3. September 2009

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

F.A.Q.

Donnerstag, 3. September 2009

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

Duplikation im generierten Code

Donnerstag, 3. September 2009

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

Kompatibilität zwischen Frameworks

Donnerstag, 3. September 2009

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

Work in progress

Donnerstag, 3. September 2009

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

Fragen?

Donnerstag, 3. September 2009

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

{less}

Donnerstag, 3. September 2009

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

Motivation

Donnerstag, 3. September 2009

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

Syntax

Donnerstag, 3. September 2009

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

css = less

Donnerstag, 3. September 2009

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

Installation

Donnerstag, 3. September 2009

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

> sudo gem install less

Donnerstag, 3. September 2009

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

Rails

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

Production vs. Dev

Donnerstag, 3. September 2009

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

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

[sic]

Donnerstag, 3. September 2009

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

Syntax

Donnerstag, 3. September 2009

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

Variablen

Donnerstag, 3. September 2009

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

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

#header { color: @light-blue; }

Donnerstag, 3. September 2009

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

Mixins

Donnerstag, 3. September 2009

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

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

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

Donnerstag, 3. September 2009

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

Nested rules

Donnerstag, 3. September 2009

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

#header { color: black;

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

Donnerstag, 3. September 2009

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

Operations

Donnerstag, 3. September 2009

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

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

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

Donnerstag, 3. September 2009

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

Namespaces / Accessors

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

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

.article { color: #294366; }

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

Donnerstag, 3. September 2009

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

Scope

Donnerstag, 3. September 2009

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

@var: red;

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

Donnerstag, 3. September 2009

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

Kommentare

Donnerstag, 3. September 2009

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

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

// Get in line!@var: white;

Donnerstag, 3. September 2009

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

@import

Donnerstag, 3. September 2009

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

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

Donnerstag, 3. September 2009

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

discuss.

Donnerstag, 3. September 2009

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

http://twitter.com/halfbyte

http://github.com/halfbyte

http://www.flickr.com/photos/jankrutisch/

dangge.

Donnerstag, 3. September 2009