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

1,644 views

Published on

This is the german version of my presentation on HAML, SASS and COMPASS.

I added an additional section on lesscss

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,644
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. (disclaimer) Donnerstag, 3. September 2009
  3. 3. HAML Donnerstag, 3. September 2009
  4. 4. http://haml-lang.com/ Donnerstag, 3. September 2009
  5. 5. (X)HTML Abstraction Markup Language Donnerstag, 3. September 2009
  6. 6. Nur 'ne neue Template-Engine? Donnerstag, 3. September 2009
  7. 7. <em> <% "was ist falsch an erb or erubis?" %> </em> Donnerstag, 3. September 2009
  8. 8. Nix. Donnerstag, 3. September 2009
  9. 9. Mächtig. Donnerstag, 3. September 2009
  10. 10. Flexibel. Donnerstag, 3. September 2009
  11. 11. Ausreichend schnell. Donnerstag, 3. September 2009
  12. 12. ABER! Donnerstag, 3. September 2009
  13. 13. mirscheissegal Donnerstag, 3. September 2009
  14. 14. 1) Ich habe Kontrolle über meinen Template-Code Donnerstag, 3. September 2009
  15. 15. 2) Ich bin ein disziplinierter Coder Donnerstag, 3. September 2009
  16. 16. 3) Ich schreib mein HTML selber. Donnerstag, 3. September 2009
  17. 17. Andere Sichtweise Donnerstag, 3. September 2009
  18. 18. (x)HTML = XML Donnerstag, 3. September 2009
  19. 19. Tagsoup Text Donnerstag, 3. September 2009
  20. 20. HTML-Tags = Redundanz Donnerstag, 3. September 2009
  21. 21. <div> </div> Donnerstag, 3. September 2009
  22. 22. <div> Re d und </div> an t ! Donnerstag, 3. September 2009
  23. 23. ERB = Zu Nachsichtig Donnerstag, 3. September 2009
  24. 24. (Zu agnostisch) Donnerstag, 3. September 2009
  25. 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
  26. 26. found via google search, source unknown Donnerstag, 3. September 2009
  27. 27. "There must be a better way"™ Donnerstag, 3. September 2009
  28. 28. Abstrahieren! Donnerstag, 3. September 2009
  29. 29. HAML Donnerstag, 3. September 2009
  30. 30. Kompakt Donnerstag, 3. September 2009
  31. 31. Keine Redundanzen Donnerstag, 3. September 2009
  32. 32. Wacht über die Dokumentenstruktur Donnerstag, 3. September 2009
  33. 33. Gibt tollen HTML- Code aus. Donnerstag, 3. September 2009
  34. 34. installation als gem & rails plugin Donnerstag, 3. September 2009
  35. 35. > gem install haml > cd rails_app > haml --rails . Donnerstag, 3. September 2009
  36. 36. (Library/ commandline tool) Donnerstag, 3. September 2009
  37. 37. Tags! Donnerstag, 3. September 2009
  38. 38. %table %tr %td Hey there Donnerstag, 3. September 2009
  39. 39. %table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Donnerstag, 3. September 2009
  40. 40. %table %tr %td Hey there Magic! <table> <tr> <td> Hey there </td> </tr> </table> Donnerstag, 3. September 2009
  41. 41. Self-closing tags Donnerstag, 3. September 2009
  42. 42. %foo/ Magic! <foo/> Donnerstag, 3. September 2009
  43. 43. automagisch für: •meta •img •link •script •br •hr Donnerstag, 3. September 2009
  44. 44. Whitespace control Donnerstag, 3. September 2009
  45. 45. (für die dämlichen Browserbugs) Donnerstag, 3. September 2009
  46. 46. %blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Donnerstag, 3. September 2009
  47. 47. %img %img> %img Magic! <img /><img /><img /> Donnerstag, 3. September 2009
  48. 48. Attribute! Donnerstag, 3. September 2009
  49. 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. 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. 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
  52. 52. Attribut-Helper Donnerstag, 3. September 2009
  53. 53. def html_attrs(lang = 'en-US') { :xmlns => "http://www.w3.org/1999/xhtml", 'xml:lang' => lang, :lang => lang } end Donnerstag, 3. September 2009
  54. 54. %html{html_attrs(lang = 'de-DE')} Magic! <html lang='de-DE' xml:lang='de-DE' xmlns='http://www.w3.org/1999/xhtml'> </html> Donnerstag, 3. September 2009
  55. 55. Spezialgelagerter Sonderfall: Donnerstag, 3. September 2009
  56. 56. IDs & Klassen Donnerstag, 3. September 2009
  57. 57. #aye_dee .klazz Aha! Magic! <div id='aye_dee'> <div class='klazz'> Aha! </div> </div> Donnerstag, 3. September 2009
  58. 58. Ruby! Donnerstag, 3. September 2009
  59. 59. %p= "Yay".downcase Magic! <p>yay</p> Donnerstag, 3. September 2009
  60. 60. %p&= "<b>Yay</b>".downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Donnerstag, 3. September 2009
  61. 61. %p!= "<b>Yay</b>".downcase Magic! <p><b>yay</b></p> Donnerstag, 3. September 2009
  62. 62. %p= "<b>Yay</b>".downcase Magic! <p><b>yay</b></p> Donnerstag, 3. September 2009
  63. 63. %p= "<b>Yay</b>".downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Donnerstag, 3. September 2009
  64. 64. :escape_html Donnerstag, 3. September 2009
  65. 65. %p== #{followers} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 3. September 2009
  66. 66. De p re %p== #{followers} Followers c a t e d! Magic! <p>120231373274987476 Followers</p> Donnerstag, 3. September 2009
  67. 67. %p #{followers} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 3. September 2009
  68. 68. (siehe oben) Donnerstag, 3. September 2009
  69. 69. %pre~ "YaynHey".downcase Magic! <pre>yay hey</pre> Donnerstag, 3. September 2009
  70. 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
  71. 71. Auto-IDs und -Klassen Donnerstag, 3. September 2009
  72. 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
  73. 73. Filter Donnerstag, 3. September 2009
  74. 74. :textile h1. Header Hello _world_ Magic! <h1>Header</h1> <p>Hello <em>world</em></p> Donnerstag, 3. September 2009
  75. 75. Verfügbare Filter ‣ plain ‣ sass ‣ javascript ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ cdata ‣ erb ‣ roll yer own Donnerstag, 3. September 2009
  76. 76. Kommentare Donnerstag, 3. September 2009
  77. 77. / This is a comment Magic! <!-- This is a comment --> Donnerstag, 3. September 2009
  78. 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
  79. 79. -# A silent comment Donnerstag, 3. September 2009
  80. 80. -# A silent comment Magic! Donnerstag, 3. September 2009
  81. 81. Und viel mehr. Donnerstag, 3. September 2009
  82. 82. atlin.com/docs/rdoc/ classes/Haml.html http://haml.hamptonc Donnerstag, 3. September 2009
  83. 83. F.A.Q. Donnerstag, 3. September 2009
  84. 84. Performance Donnerstag, 3. September 2009
  85. 85. Ohne Rails Donnerstag, 3. September 2009
  86. 86. require 'rubygems' require 'haml' template = open('simple.haml').read engine = Haml::Engine.new(template) puts engine.render Donnerstag, 3. September 2009
  87. 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
  88. 88. Migration Donnerstag, 3. September 2009
  89. 89. SASS Donnerstag, 3. September 2009
  90. 90. http://sass-lang.com/ Donnerstag, 3. September 2009
  91. 91. Syntactically Awesome StyleSheets Donnerstag, 3. September 2009
  92. 92. Warum? Donnerstag, 3. September 2009
  93. 93. found via google search, source unknown Donnerstag, 3. September 2009
  94. 94. Warum? Donnerstag, 3. September 2009
  95. 95. Keine Variablen/ Konstanten Donnerstag, 3. September 2009
  96. 96. Keine Abstraktionen Donnerstag, 3. September 2009
  97. 97. Kein „echtes“ Kaskadieren Donnerstag, 3. September 2009
  98. 98. Ein paar überflüssige Zeichen Donnerstag, 3. September 2009
  99. 99. Installation Donnerstag, 3. September 2009
  100. 100. (kommt mit haml) Donnerstag, 3. September 2009
  101. 101. stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 3. September 2009
  102. 102. Simples Donnerstag, 3. September 2009
  103. 103. #main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; } Donnerstag, 3. September 2009
  104. 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. 105. ( Könnte sinnvoll sein in Situationen mit Migrationshintergrund. ) Donnerstag, 3. September 2009
  106. 106. References on parent Donnerstag, 3. September 2009
  107. 107. a color: #0f0 &:hover color: #0ff Magic! a { color: #0f0; } a:hover { color: #0ff; } Donnerstag, 3. September 2009
  108. 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. 109. Compound styles Donnerstag, 3. September 2009
  110. 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. 111. Konstanten Donnerstag, 3. September 2009
  112. 112. !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 3. September 2009
  113. 113. Ach t u ng! !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 3. September 2009
  114. 114. Berechnungen Donnerstag, 3. September 2009
  115. 115. !bg_color = #002244 body :color = !bg_color + #020202 Magic! body { color: #022446; } Donnerstag, 3. September 2009
  116. 116. Mixins Donnerstag, 3. September 2009
  117. 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. 118. Mixin-Argumente Donnerstag, 3. September 2009
  119. 119. =border(!color = #000) :border 1px solid :color = !color #foo +border(#fea) Donnerstag, 3. September 2009
  120. 120. Kontrollstrukturen Donnerstag, 3. September 2009
  121. 121. @for !n from 1 through 6 h#{!n} :padding 0 :margin 0 Donnerstag, 3. September 2009
  122. 122. !shall_we = false @if !shall_we body :background-color yellow @else body :display none Donnerstag, 3. September 2009
  123. 123. @import Donnerstag, 3. September 2009
  124. 124. Ausgabe-Styles Donnerstag, 3. September 2009
  125. 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. 126. F.A.Q. Donnerstag, 3. September 2009
  127. 127. Performance Donnerstag, 3. September 2009
  128. 128. File caching Donnerstag, 3. September 2009
  129. 129. Reload-Verhalten Donnerstag, 3. September 2009
  130. 130. Benutzung ohne Rails Donnerstag, 3. September 2009
  131. 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. 132. COMPASS Donnerstag, 3. September 2009
  133. 133. CSS meta framework Donnerstag, 3. September 2009
  134. 134. CSS-Frameworks •Blueprint •YUI-Grids •960.gs •YAML Donnerstag, 3. September 2009
  135. 135. COMPASS-Module •Reset •Utilities •Layout Donnerstag, 3. September 2009
  136. 136. Installation Donnerstag, 3. September 2009
  137. 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
  138. 138. Rails-Integration Donnerstag, 3. September 2009
  139. 139. > compass --rails . Donnerstag, 3. September 2009
  140. 140. app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 3. September 2009
  141. 141. Beispiel (Blueprint) Donnerstag, 3. September 2009
  142. 142. header artist_header logo_header body footer Donnerstag, 3. September 2009
  143. 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. 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. 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. 146. Flexible Raster- Definitionen Donnerstag, 3. September 2009
  147. 147. (try that, blueprint!) Donnerstag, 3. September 2009
  148. 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. 149. F.A.Q. Donnerstag, 3. September 2009
  150. 150. Duplikation im generierten Code Donnerstag, 3. September 2009
  151. 151. Kompatibilität zwischen Frameworks Donnerstag, 3. September 2009
  152. 152. Work in progress Donnerstag, 3. September 2009
  153. 153. Fragen? Donnerstag, 3. September 2009
  154. 154. {less} Donnerstag, 3. September 2009
  155. 155. Motivation Donnerstag, 3. September 2009
  156. 156. Syntax Donnerstag, 3. September 2009
  157. 157. css = less Donnerstag, 3. September 2009
  158. 158. Installation Donnerstag, 3. September 2009
  159. 159. > sudo gem install less Donnerstag, 3. September 2009
  160. 160. Rails Donnerstag, 3. September 2009
  161. 161. > script/plugin install > git://github.com/augustl/less-for-rails.git Donnerstag, 3. September 2009
  162. 162. public/stylesheets/foo.less >>> public/stylesheets/foo.css Donnerstag, 3. September 2009
  163. 163. Production vs. Dev Donnerstag, 3. September 2009
  164. 164. It is very fabolous, and the plugin has won many prizes for this. [sic] Donnerstag, 3. September 2009
  165. 165. Syntax Donnerstag, 3. September 2009
  166. 166. Variablen Donnerstag, 3. September 2009
  167. 167. @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } Donnerstag, 3. September 2009
  168. 168. Mixins Donnerstag, 3. September 2009
  169. 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. 170. Nested rules Donnerstag, 3. September 2009
  171. 171. #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; :hover { text-decoration: none } } } Donnerstag, 3. September 2009
  172. 172. Operations Donnerstag, 3. September 2009
  173. 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. 174. Namespaces / Accessors Donnerstag, 3. September 2009
  175. 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. 176. #defaults { @width: 960px; @color: black; } .article { color: #294366; } .comment { width: #defaults[@width]; color: .article['color']; } Donnerstag, 3. September 2009
  177. 177. Scope Donnerstag, 3. September 2009
  178. 178. @var: red; #page { @var: white; #header { color: @var; // white } } Donnerstag, 3. September 2009
  179. 179. Kommentare Donnerstag, 3. September 2009
  180. 180. /* One hell of a comment */ @var: red; // Get in line! @var: white; Donnerstag, 3. September 2009
  181. 181. @import Donnerstag, 3. September 2009
  182. 182. @import "library"; @import "typo.css"; Donnerstag, 3. September 2009
  183. 183. discuss. Donnerstag, 3. September 2009
  184. 184. http://twitter.com/halfbyte http://github.com/halfbyte http://www.flickr.com/photos/jankrutisch/ dangge. Donnerstag, 3. September 2009

×