SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Show the frontend some love - HAML, SASS and COMPASS
Rails made Web application development substantially more enjoyable. Surprisingly, even in Rails 2.3, there are some areas that still suck: Erb-Templates are the typical HTML/XML tag soup mess, CSS-Files are, well, CSS files. HAML and SASS are two technologies to fix this: HAML templates are concise and powerful, SASS makes writing CSS almost a fun experience. Be there or be width:20px height:20px.
Rails made Web application development substantially more enjoyable. Surprisingly, even in Rails 2.3, there are some areas that still suck: Erb-Templates are the typical HTML/XML tag soup mess, CSS-Files are, well, CSS files. HAML and SASS are two technologies to fix this: HAML templates are concise and powerful, SASS makes writing CSS almost a fun experience. Be there or be width:20px height:20px.
Show the frontend some love - HAML, SASS and COMPASS
1.
Show the frontend some love
haml & sass & compass
26.05.2009
RailsWayCon
Jan Krutisch <jan@krutisch.de>
mindmatters GmbH & Co. KG
Dienstag, 26. Mai 2009
2.
Jan Krutisch
‣ Rails since 2005
‣ Founder of rubyonrails-ug.de
‣ Writer of a book and many articles
‣ Rails team captain @ mindmatters
‣ General all purpose geek
Dienstag, 26. Mai 2009
40.
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>
Dienstag, 26. Mai 2009
41.
found via google search, source unknown
Dienstag, 26. Mai 2009
42.
quot;There must be
a better wayquot;™
Dienstag, 26. Mai 2009
113.
#main
:color #0f0
:width 300px
p
:color #030
Magic!
#main {
color: #0f0;
width: 300px; }
#main p {
color: #030; }
Dienstag, 26. Mai 2009
114.
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; }
Dienstag, 26. Mai 2009
115.
(
might be useful in migrational
situations
)
Dienstag, 26. Mai 2009
130.
.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
:
Dienstag, 26. Mai 2009