Show the frontend some love - HAML, SASS and COMPASSjan_mindmatters
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 COMPASSjan_mindmatters
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.
1. HAML und SASS
(und COMPASS)
markup haiku vs.
syntactically awesome stylesheets
Tobias Adam, Jan Krutisch
mindmatters GmbH & Co. KG
Donnerstag, 12. März 2009
10. <div>
Re d
und
</div>a n t !
Donnerstag, 12. März 2009
11. ERB = Zu Nachsichtig
Donnerstag, 12. März 2009
12. .e r b
de x
in <%= render :partial => 'head' %>
...
<%= render :partial => 'foot' %>
.e r b
e ad
_h
<body>
.e r b
foo t
_
</body>
Donnerstag, 12. März 2009
62. #main
:color #0f0
:width 300px
p
:color #030
Magic!
#main {
color: #0f0;
width: 300px; }
#main p {
color: #030; }
Donnerstag, 12. März 2009
63. a l te
rna
#main
t i ve
color: #0f0
syn
width: 300px
tax
p
color: #030
Magic!
#main {
color: #0f0;
width: 300px; }
#main p {
color: #030; }
Donnerstag, 12. März 2009
64. (
eventuell besser in situationen mit
migrationshintergrund
)
Donnerstag, 12. März 2009
79. .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 d
s se
solid black;padding:5px} p re
om
:c
Donnerstag, 12. März 2009
103. // Clearing floats without extra markup
// Simple Clearing of Floats
// [...]
=clearfix
:overflow auto
:overflow -moz-scrollbars-none
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block
discuss.
Donnerstag, 12. März 2009
104. // Hides html text and replaces it with an image.
// If you use this on an inline element, you will
// need to change the display to block or inline-block.
=replace-text( !img, !x = 50%, !y = 50% )
:text-indent -9999em
:overflow hidden
:background
:image= url(!img)
:repeat no-repeat
:position= !x !y
Donnerstag, 12. März 2009