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 <jan.krutisch@mindmatters.de>mindmatters GmbH & Co. KG

Donnerstag, 3. September 2009

(disclaimer)

http://haml-lang.com/

(X)HTML Abstraction Markup Language

Nur 'ne neue Template-Engine?

Mächtig.

Flexibel.

Ausreichend schnell.

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

HTML-Tags = Redundanz

</div>

</div>Redundant!

ERB = Zu Nachsichtig

(Zu agnostisch)

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

<body>

</body>

index.erb

_head.erb

_foot.erb

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

"There must bea 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)

%table %tr %td Hey there

Magic!

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

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

Self-closing tags

<foo/>

Magic!

automagisch für:

•meta

•img

•link

•script

Whitespace control

(für die dämlichen Browserbugs)

%blockquote< %div Foo!

Magic!

%img%img>%img

Magic!

Attribute!

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

Magic!

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

Magic!

Deprecated!

%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

Magic!

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

Spezialgelagerter Sonderfall:

IDs & Klassen

Magic!

#aye_dee .klazz Aha!

Magic!

%p= "Yay".downcase

Magic!

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

Magic!

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

Magic!

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

Magic!

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

:escape_html

Magic!

<p>120231373274987476 Followers</p>

%p== #{followers} Followers

Magic!

<p>120231373274987476 Followers</p>

%p== #{followers} FollowersDeprecated!

Magic!

<p>120231373274987476 Followers</p>

%p #{followers} Followers

(siehe oben)

Magic!

%pre~ "Yay\nHey".downcase

Magic!

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

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

Auto-IDs und -Klassen

Magic!

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

Filter

Magic!

<h1>Header</h1>

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

:textile h1. Header Hello _world_

Verfügbare Filter

‣ plain

‣ javascript

‣ escaped

‣ ruby

‣ preserve

‣ erb

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

Kommentare

Magic!

/ This is a comment

Magic!

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

-# A silent comment

Magic!

-# A silent comment

Und viel mehr.

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

F.A.Q.

Performance

Ohne Rails

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

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

Migration

http://sass-lang.com/

Syntactically Awesome StyleSheets

Warum?

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

Warum?

Keine Variablen/ Konstanten

Keine Abstraktionen

Kein „echtes“ Kaskadieren

Ein paar überflüssige Zeichen

Installation

(kommt mit haml)

stylesheets/sass/screen.sass

stylesheets/screen.css

Magic!

Simples

Magic!

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

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

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

Magic!

alternative syntax

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

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

Referenceson parent

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

Magic!

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

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

Magic!

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

Compoundstyles

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

Magic!

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

Konstanten

!bg_color = #002244body :color = !bg_color

body { background-color: #002244; }

Magic!

!bg_color = #002244body :color = !bg_color

Magic!

Achtung!

Berechnungen

Magic!

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

Mixins

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

=standard-border :border 1px solid black#main +standard-border :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

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

F.A.Q.

Performance

File caching

Reload-Verhalten

Benutzung ohne Rails

require 'rubygems'require 'sass'

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

COMPASS

CSS meta framework

CSS-Frameworks

•Blueprint

•YUI-Grids

•960.gs

•YAML

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 Raster-Definitionen

(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(24, true) #artist_header +column(6)

#logo_header +column(18, true)

#body +column(24, true) #footer +column(24, true)

F.A.Q.

Duplikation im generierten Code

Kompatibilität zwischen Frameworks

Work in progress

Fragen?

{less}

Motivation

Syntax

css = less

Installation

> sudo gem install less

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

Syntax

Variablen

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

#header { color: @light-blue; }

Mixins

.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']; }

@var: red;

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

Kommentare

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

// Get in line!@var: white;

@import

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

discuss.

http://twitter.com/halfbyte

http://github.com/halfbyte

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

dangge.

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

Technology

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

Sass 공부하기 slidshare

Pre-procesadores CSS. SASS

Haml y Sass: HTML y CSS dietéticos

sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入＆コンパイル • エディタでSassを認識させる（Syntax Highlight）

CSS Preprocessors - Sass

Accenture SASS Recommendations

Frontend-Entwicklung mit SASS & Compass

Introduction To Haml

建立 Sass 環境，透過 Node sass

Sass introduction (jscafe 10)

SASS - minu töömeetod

[Curso CSS3 com Sass e Compass] Aula 07: Importando outros arquivos Sass

Sass - Introdução

PEPERIKSAAN PPKI SASS THN4

Sass Maor - Scalet Biasin

Guide stratégique - SASS

Sass & Compass / W3CTech Shanghai

About Sass

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

Apprendre sass