![%ul
- ['foo', 'bar'].each do |el|
%li[el]= el
Magic!
<ul/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
<li class='string' id='string_2970900'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>foo</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
<li class='string' id='string_2970890'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>bar</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
</ul/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
Donnerstag, 3. September 2009](https://image.slidesharecdn.com/hamlsassrailskonferenz2009-090903104847-phpapp02/85/Liebe-Dein-Frontend-wie-Dich-selbst-HAML-SASS-COMPASS-less-72-320.jpg)
![/[if IE]
%a{ :href =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> 'http://www.mozilla.com/en-US/firefox/' }
%h1 Get Firefox!
Magic!
<!--[if IE]/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
<a href="http://www.getfirefox.com/"/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
<h1/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Get Firefox!</h1/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
</a/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
<![endif]--/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>
Donnerstag, 3. September 2009](https://image.slidesharecdn.com/hamlsassrailskonferenz2009-090903104847-phpapp02/85/Liebe-Dein-Frontend-wie-Dich-selbst-HAML-SASS-COMPASS-less-78-320.jpg)
![!!! 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](https://image.slidesharecdn.com/hamlsassrailskonferenz2009-090903104847-phpapp02/85/Liebe-Dein-Frontend-wie-Dich-selbst-HAML-SASS-COMPASS-less-143-320.jpg)
![!!! 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](https://image.slidesharecdn.com/hamlsassrailskonferenz2009-090903104847-phpapp02/85/Liebe-Dein-Frontend-wie-Dich-selbst-HAML-SASS-COMPASS-less-144-320.jpg)
![It is very fabolous,
and the plugin has won many prizes for this.
[sic]
Donnerstag, 3. September 2009](https://image.slidesharecdn.com/hamlsassrailskonferenz2009-090903104847-phpapp02/85/Liebe-Dein-Frontend-wie-Dich-selbst-HAML-SASS-COMPASS-less-164-320.jpg)
![#defaults {
@width: 960px;
@color: black;
}
.article { color: #294366; }
.comment {
width: #defaults[@width];
color: .article['color'];
}
Donnerstag, 3. September 2009](https://image.slidesharecdn.com/hamlsassrailskonferenz2009-090903104847-phpapp02/85/Liebe-Dein-Frontend-wie-Dich-selbst-HAML-SASS-COMPASS-less-176-320.jpg)
Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less
- 1. Liebe Dein Frontend wie Dich selbst. haml & sass & compass & less 02.09.2009 Rails-Konferenz 2009 Jan Krutisch <jan.krutisch@mindmatters.de/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> mindmatters GmbH & Co. KG Donnerstag, 3. September 2009
- 3. HAML Donnerstag, 3. September 2009
- 5. (X)HTML Abstraction Markup Language Donnerstag, 3. September 2009
- 6. Nur 'ne neue Template-Engine? Donnerstag, 3. September 2009
- 7. <em/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <% "was ist falsch an erb or erubis?" %/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </em/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 8. Nix. Donnerstag, 3. September 2009
- 10. Flexibel. Donnerstag, 3. September 2009
- 11. Ausreichend schnell. Donnerstag, 3. September 2009
- 12. ABER! 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
- 16. 3) Ich schreib mein HTML selber. Donnerstag, 3. September 2009
- 17. Andere Sichtweise 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/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 22. <div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Re d und </div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> an t ! Donnerstag, 3. September 2009
- 23. ERB = Zu Nachsichtig Donnerstag, 3. September 2009
- 24. (Zu agnostisch) Donnerstag, 3. September 2009
- 25. de x .e r b in <%= render :partial =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> 'head' %/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> ... <%= render :partial =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> 'foot' %/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> e ad .e r b _h <body/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> foo t .e r b _ </body/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 26. found via google search, source unknown Donnerstag, 3. September 2009
- 27. "There must be a better way" Donnerstag, 3. September 2009
- 29. HAML Donnerstag, 3. September 2009
- 30. Kompakt Donnerstag, 3. September 2009
- 31. Keine Redundanzen Donnerstag, 3. September 2009
- 32. Wacht 端ber die Dokumentenstruktur Donnerstag, 3. September 2009
- 33. Gibt tollen HTML- Code aus. Donnerstag, 3. September 2009
- 34. installation als gem & rails plugin Donnerstag, 3. September 2009
- 35. /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> gem install haml /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> cd rails_app /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> haml --rails . Donnerstag, 3. September 2009
- 36. (Library/ commandline tool) Donnerstag, 3. September 2009
- 37. Tags! Donnerstag, 3. September 2009
- 38. %table %tr %td Hey there Donnerstag, 3. September 2009
- 39. %table %tr %td Hey there Magic! <table/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <tr/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <td/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Hey there</td/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </tr/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </table/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 40. %table %tr %td Hey there Magic! <table/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <tr/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <td/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Hey there </td/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </tr/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </table/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 41. Self-closing tags Donnerstag, 3. September 2009
- 42. %foo/ Magic! <foo//jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 43. automagisch f端r: meta img link script br hr Donnerstag, 3. September 2009
- 44. Whitespace control Donnerstag, 3. September 2009
- 45. (f端r die d辰mlichen Browserbugs) Donnerstag, 3. September 2009
- 46. %blockquote< %div Foo! Magic! <blockquote/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Foo! </div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/></blockquote/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 47. %img %img/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> %img Magic! <img //jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><img //jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><img //jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 48. Attribute! Donnerstag, 3. September 2009
- 49. %head{ :name =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> "doc_head" } %script{ 'type' =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> "text/" + "javascript", :src =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/"javascripts/script_ + 7}" } Magic! <head name='doc_head'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </script/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </head/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 50. %head{ :name =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> "doc_head" } De p %script{ 'type' =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> "text/" + "javascript", re c at :src =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/"javascripts/script_ + 7}" } e d! Magic! <head name='doc_head'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </script/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </head/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 51. %head(name="doc_head") %script(type="text/javascript", src=/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/"javascripts/script_ + 7}") Magic! <head name='doc_head'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </script/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </head/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 53. def html_attrs(lang = 'en-US') { :xmlns =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> "http://www.w3.org/1999/xhtml", 'xml:lang' =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> lang, :lang =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> lang } end Donnerstag, 3. September 2009
- 54. %html{html_attrs(lang = 'de-DE')} Magic! <html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </html/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 55. Spezialgelagerter Sonderfall: Donnerstag, 3. September 2009
- 56. IDs & Klassen Donnerstag, 3. September 2009
- 57. #aye_dee .klazz Aha! Magic! <div id='aye_dee'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <div class='klazz'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Aha! </div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </div/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 58. Ruby! Donnerstag, 3. September 2009
- 59. %p= "Yay".downcase Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>yay</p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 60. %p&= "<b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Yay</b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>".downcase Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><b>yay</b></p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 61. %p!= "<b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Yay</b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>".downcase Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>yay</b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/></p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 62. %p= "<b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Yay</b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>".downcase Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>yay</b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/></p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 63. %p= "<b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Yay</b/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>".downcase Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/><b>yay</b></p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 65. %p== #{followers} Followers Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>120231373274987476 Followers</p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 66. De p re %p== #{followers} Followers c a t e d! Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>120231373274987476 Followers</p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 67. %p #{followers} Followers Magic! <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>120231373274987476 Followers</p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 68. (siehe oben) Donnerstag, 3. September 2009
- 69. %pre~ "YaynHey".downcase Magic! <pre/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>yay
hey</pre/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 70. %ul - %w{one two three}.each do |word| %li= word Magic! <ul/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>one</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>two</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>three</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </ul/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 71. Auto-IDs und -Klassen Donnerstag, 3. September 2009
- 72. %ul - ['foo', 'bar'].each do |el| %li[el]= el Magic! <ul/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <li class='string' id='string_2970900'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>foo</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <li class='string' id='string_2970890'/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>bar</li/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </ul/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 73. Filter Donnerstag, 3. September 2009
- 74. :textile h1. Header Hello _world_ Magic! <h1/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Header</h1/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Hello <em/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>world</em/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/></p/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> 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
- 76. Kommentare Donnerstag, 3. September 2009
- 77. / This is a comment Magic! <!-- This is a comment --/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 78. /[if IE] %a{ :href =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> 'http://www.mozilla.com/en-US/firefox/' } %h1 Get Firefox! Magic! <!--[if IE]/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <a href="http://www.getfirefox.com/"/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <h1/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>Get Firefox!</h1/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> </a/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> <![endif]--/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> Donnerstag, 3. September 2009
- 79. -# A silent comment Donnerstag, 3. September 2009
- 80. -# A silent comment Magic! Donnerstag, 3. September 2009
- 81. Und viel mehr. Donnerstag, 3. September 2009
- 82. atlin.com/docs/rdoc/ classes/Haml.html http://haml.hamptonc Donnerstag, 3. September 2009
- 83. F.A.Q. Donnerstag, 3. September 2009
- 84. Performance Donnerstag, 3. September 2009
- 85. Ohne Rails 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 =/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> 'bar') Donnerstag, 3. September 2009
- 88. Migration Donnerstag, 3. September 2009
- 89. SASS Donnerstag, 3. September 2009
- 91. Syntactically Awesome StyleSheets Donnerstag, 3. September 2009
- 92. Warum? Donnerstag, 3. September 2009
- 93. found via google search, source unknown Donnerstag, 3. September 2009
- 94. Warum? Donnerstag, 3. September 2009
- 95. Keine Variablen/ Konstanten Donnerstag, 3. September 2009
- 96. Keine Abstraktionen Donnerstag, 3. September 2009
- 97. Kein echtes Kaskadieren Donnerstag, 3. September 2009
- 98. Ein paar 端ber鍖端ssige Zeichen Donnerstag, 3. September 2009
- 100. (kommt mit haml) Donnerstag, 3. September 2009
- 101. stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 3. September 2009
- 102. Simples 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
- 111. Konstanten 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
- 114. Berechnungen Donnerstag, 3. September 2009
- 115. !bg_color = #002244 body :color = !bg_color + #020202 Magic! body { color: #022446; } Donnerstag, 3. September 2009
- 116. Mixins 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
- 118. Mixin-Argumente 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
- 123. @import Donnerstag, 3. September 2009
- 124. Ausgabe-Styles 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
- 126. F.A.Q. Donnerstag, 3. September 2009
- 127. Performance Donnerstag, 3. September 2009
- 128. File caching Donnerstag, 3. September 2009
- 130. Benutzung ohne Rails 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
- 132. COMPASS Donnerstag, 3. September 2009
- 133. CSS meta framework 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
- 136. Installation Donnerstag, 3. September 2009
- 137. /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> git clone git://github.com/nex3/haml.git /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> cd haml /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> sudo rake install /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> gem sources --add http://gems.github.com/ /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> sudo gem install chriseppstein-compass Donnerstag, 3. September 2009
- 139. /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> compass --rails . Donnerstag, 3. September 2009
- 140. app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 3. September 2009
- 141. Beispiel (Blueprint) 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
- 146. Flexible Raster- De鍖nitionen Donnerstag, 3. September 2009
- 147. (try that, blueprint!) 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
- 149. F.A.Q. Donnerstag, 3. September 2009
- 150. Duplikation im generierten Code Donnerstag, 3. September 2009
- 151. 悪看馨沿温岳庄恢庄鉛庄岳辰岳 zwischen Frameworks Donnerstag, 3. September 2009
- 152. Work in progress Donnerstag, 3. September 2009
- 153. Fragen? Donnerstag, 3. September 2009
- 154. {less} Donnerstag, 3. September 2009
- 155. Motivation Donnerstag, 3. September 2009
- 156. Syntax Donnerstag, 3. September 2009
- 157. css = less Donnerstag, 3. September 2009
- 158. Installation Donnerstag, 3. September 2009
- 159. /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> sudo gem install less Donnerstag, 3. September 2009
- 160. Rails Donnerstag, 3. September 2009
- 161. /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> script/plugin install /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> git://github.com/augustl/less-for-rails.git Donnerstag, 3. September 2009
- 162. public/stylesheets/foo.less /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/>/jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> public/stylesheets/foo.css Donnerstag, 3. September 2009
- 163. Production vs. Dev Donnerstag, 3. September 2009
- 164. It is very fabolous, and the plugin has won many prizes for this. [sic] Donnerstag, 3. September 2009
- 165. Syntax Donnerstag, 3. September 2009
- 166. Variablen Donnerstag, 3. September 2009
- 167. @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } Donnerstag, 3. September 2009
- 168. Mixins 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
- 170. Nested rules Donnerstag, 3. September 2009
- 171. #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; :hover { text-decoration: none } } } Donnerstag, 3. September 2009
- 172. Operations 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
- 174. Namespaces / Accessors 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 /jan_mindmatters/liebe-dein-frontend-wie-dich-selbst-haml-sass-compass-less/> .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
- 177. Scope Donnerstag, 3. September 2009
- 178. @var: red; #page { @var: white; #header { color: @var; // white } } Donnerstag, 3. September 2009
- 179. Kommentare Donnerstag, 3. September 2009
- 180. /* One hell of a comment */ @var: red; // Get in line! @var: white; Donnerstag, 3. September 2009
- 181. @import Donnerstag, 3. September 2009
- 182. @import "library"; @import "typo.css"; Donnerstag, 3. September 2009
- 183. discuss. Donnerstag, 3. September 2009
- 184. http://twitter.com/halfbyte http://github.com/halfbyte http://www.鍖ickr.com/photos/jankrutisch/ dangge. Donnerstag, 3. September 2009