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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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