Weitere Ă€hnliche Inhalte Ăhnlich wie Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less (9) Mehr von jan_mindmatters (9) KĂŒrzlich hochgeladen (20) Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less1. 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
6. Nur 'ne neue
Template-Engine?
Donnerstag, 3. September 2009
7. <em>
<% "was ist falsch an
erb or erubis?" %>
</em>
Donnerstag, 3. September 2009
14. 1) Ich habe Kontrolle
ĂŒber meinen
Template-Code
Donnerstag, 3. September 2009
15. 2) Ich bin ein
disziplinierter Coder
Donnerstag, 3. September 2009
18. (x)HTML
=
XML
Donnerstag, 3. September 2009
19. Tagsoup
Text
Donnerstag, 3. September 2009
20. HTML-Tags =
Redundanz
Donnerstag, 3. September 2009
21. <div>
</div>
Donnerstag, 3. September 2009
22. <div>
Re d
und
</div> an t
!
Donnerstag, 3. September 2009
23. ERB = Zu Nachsichtig
Donnerstag, 3. September 2009
25. 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>
Donnerstag, 3. September 2009
35. > gem install haml
> cd rails_app
> haml --rails .
Donnerstag, 3. September 2009
36. (Library/
commandline tool)
Donnerstag, 3. September 2009
38. %table
%tr
%td Hey there
Donnerstag, 3. September 2009
39. %table
%tr
%td Hey there
Magic!
<table>
<tr>
<td>Hey there</td>
</tr>
</table>
Donnerstag, 3. September 2009
40. %table
%tr
%td
Hey there
Magic!
<table>
<tr>
<td>
Hey there
</td>
</tr>
</table>
Donnerstag, 3. September 2009
42. %foo/
Magic!
<foo/>
Donnerstag, 3. September 2009
43. automagisch fĂŒr:
âąmeta
âąimg
âąlink
âąscript
âąbr
âąhr
Donnerstag, 3. September 2009
46. %blockquote<
%div
Foo!
Magic!
<blockquote><div>
Foo!
</div></blockquote>
Donnerstag, 3. September 2009
47. %img
%img>
%img
Magic!
<img /><img /><img />
Donnerstag, 3. September 2009
49. %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>
Donnerstag, 3. September 2009
50. %head{ :name => "doc_head" } De p
%script{ 'type' => "text/" + "javascript", re c at
:src => "javascripts/script_#{2 + 7}" }
e d!
Magic!
<head name='doc_head'>
<script src='/docs/rdoc/javascripts/script_9' type='text/javascript'>
</script>
</head>
Donnerstag, 3. September 2009
51. %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>
Donnerstag, 3. September 2009
53. def html_attrs(lang = 'en-US')
{
:xmlns => "http://www.w3.org/1999/xhtml",
'xml:lang' => lang,
:lang => lang
}
end
Donnerstag, 3. September 2009
57. #aye_dee
.klazz
Aha!
Magic!
<div id='aye_dee'>
<div class='klazz'>
Aha!
</div>
</div>
Donnerstag, 3. September 2009
66. De p
re
%p== #{followers} Followers c a t
e d!
Magic!
<p>120231373274987476 Followers</p>
Donnerstag, 3. September 2009
70. %ul
- %w{one two three}.each do |word|
%li= word
Magic!
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Donnerstag, 3. September 2009
72. %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>
Donnerstag, 3. September 2009
74. :textile
h1. Header
Hello _world_
Magic!
<h1>Header</h1>
<p>Hello <em>world</em></p>
Donnerstag, 3. September 2009
75. VerfĂŒgbare Filter
⣠plain ⣠sass
⣠javascript ⣠textile
⣠escaped ⣠markdown
⣠ruby ⣠maruku
⣠preserve ⣠cdata
⣠erb ⣠roll yer own
Donnerstag, 3. September 2009
77. / This is a comment
Magic!
<!-- This is a comment -->
Donnerstag, 3. September 2009
78. /[if IE]
%a{ :href => 'http://www.mozilla.com/en-US/firefox/' }
%h1 Get Firefox!
Magic!
<!--[if IE]>
<a href="http://www.getfirefox.com/">
<h1>Get Firefox!</h1>
</a>
<![endif]-->
Donnerstag, 3. September 2009
80. -# A silent comment
Magic!
Donnerstag, 3. September 2009
86. require 'rubygems'
require 'haml'
template = open('simple.haml').read
engine = Haml::Engine.new(template)
puts engine.render
Donnerstag, 3. September 2009
87. template = <<END
%h1= foo
END
obj = Object.new
engine =
Haml::Engine.new(template).def_method(obj, :render, :foo)
puts obj.render(:foo => 'bar')
Donnerstag, 3. September 2009
91. Syntactically
Awesome StyleSheets
Donnerstag, 3. September 2009
103. #main
:color #0f0
:width 300px
p
:color #030
Magic!
#main {
color: #0f0;
width: 300px; }
#main p {
color: #030; }
Donnerstag, 3. September 2009
104. 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; }
Donnerstag, 3. September 2009
105. (
Könnte sinnvoll sein in Situationen mit
Migrationshintergrund.
)
Donnerstag, 3. September 2009
106. References
on parent
Donnerstag, 3. September 2009
107. a
color: #0f0
&:hover
color: #0ff
Magic!
a {
color: #0f0; }
a:hover {
color: #0ff; }
Donnerstag, 3. September 2009
108. #sidebar
:float left
:margin-left 20%
.ie6 &
:margin-left 40%
Magic!
#sidebar {
float: left;
margin-left: 20%; }
.ie6 #sidebar {
margin-left: 40%; }
Donnerstag, 3. September 2009
109. Compound
styles
Donnerstag, 3. September 2009
110. .black-border
:border
:color #000
:width 2px
:style solid
Magic!
.black-border {
border-color: #000;
border-width: 2px;
border-style: solid; }
Donnerstag, 3. September 2009
112. !bg_color = #002244
body
:background-color = !bg_color
Magic!
body {
background-color: #002244; }
Donnerstag, 3. September 2009
113. Ach t u
ng!
!bg_color = #002244
body
:background-color = !bg_color
Magic!
body {
background-color: #002244; }
Donnerstag, 3. September 2009
115. !bg_color = #002244
body
:color = !bg_color + #020202
Magic!
body {
color: #022446; }
Donnerstag, 3. September 2009
117. =standard-border
:border 1px solid black
#main
+standard-border
:padding 5px
Magic!
#main {
border: 1px solid black;
padding: 5px; }
Donnerstag, 3. September 2009
119. =border(!color = #000)
:border 1px solid
:color = !color
#foo
+border(#fea)
Donnerstag, 3. September 2009
121. @for !n from 1 through 6
h#{!n}
:padding 0
:margin 0
Donnerstag, 3. September 2009
122. !shall_we = false
@if !shall_we
body
:background-color yellow
@else
body
:display none
Donnerstag, 3. September 2009
125. .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
:
Donnerstag, 3. September 2009
131. require 'rubygems'
require 'sass'
template = open('simple.sass').read
sass_engine = Sass::Engine.new(template)
output = sass_engine.render
puts output
Donnerstag, 3. September 2009
134. CSS-Frameworks
âąBlueprint
âąYUI-Grids
âą960.gs
âąYAML
Donnerstag, 3. September 2009
135. COMPASS-Module
âąReset
âąUtilities
âąLayout
Donnerstag, 3. September 2009
137. > 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
142. header
artist_header logo_header
body
footer
Donnerstag, 3. September 2009
143. !!! 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
144. !!! 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
145. @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
148. @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)
Donnerstag, 3. September 2009
159. > sudo gem install less
Donnerstag, 3. September 2009
164. It is very fabolous,
and the plugin has won many prizes for this.
[sic]
Donnerstag, 3. September 2009
167. @nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
Donnerstag, 3. September 2009
169. .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
171. #header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
:hover { text-decoration: none }
}
}
Donnerstag, 3. September 2009
173. @base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
Donnerstag, 3. September 2009
175. #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
176. #defaults {
@width: 960px;
@color: black;
}
.article { color: #294366; }
.comment {
width: #defaults[@width];
color: .article['color'];
}
Donnerstag, 3. September 2009
178. @var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
Donnerstag, 3. September 2009
180. /* One hell of a comment */
@var: red;
// Get in line!
@var: white;
Donnerstag, 3. September 2009
184. http://twitter.com/halfbyte
http://github.com/halfbyte
http://www.ïŹickr.com/photos/jankrutisch/
dangge.
Donnerstag, 3. September 2009