HAML und SASS
                (und COMPASS)
                markup haiku vs.
                syntactically awesome stylesh...
HAML




Donnerstag, 12. März 2009
(X)HTML Abstraction
                Markup Language



Donnerstag, 12. März 2009
?!
                (X)HTML Abstraction
                Markup Language



Donnerstag, 12. März 2009
Why oh why?




Donnerstag, 12. März 2009
ERB = HTML = Tag-Suppe




Donnerstag, 12. März 2009
Donnerstag, 12. März 2009
HTML-Tags = Redundant




Donnerstag, 12. März 2009
<div>


                </div>


Donnerstag, 12. März 2009
<div>

                       Re d
                              und
                </div>a n t !


Donnerstag, 12. März ...
ERB = Zu Nachsichtig




Donnerstag, 12. März 2009
.e r b
              de x
         in     <%= render :partial => 'head' %>
                ...
                <%= render ...
Donnerstag, 12. März 2009
installation als rails
                plugin



Donnerstag, 12. März 2009
> gem install haml
                > cd rails_app
                > haml --rails .


Donnerstag, 12. März 2009
Butter bei die Fische!




Donnerstag, 12. März 2009
Einfache Tags




Donnerstag, 12. März 2009
%table
                  %tr
                    %td Hey there




Donnerstag, 12. März 2009
%table
                  %tr
                    %td Hey there

                                 Magic!

                <...
Selbstschließende Tags




Donnerstag, 12. März 2009
%foo/

                            Magic!


                <foo/>


Donnerstag, 12. März 2009
Automatisch für:
                ‣ meta
                ‣ img
                ‣ link
                ‣ script
            ...
Whitespace-Kontrolle




Donnerstag, 12. März 2009
%blockquote<
                    %div
                      Foo!

                                 Magic!

               ...
%img
                %img>
                %img

                                 Magic!


                <img /><img /><...
Tag-Attribute




Donnerstag, 12. März 2009
%head{ :name => quot;doc_headquot; }
                  %script{ 'type' => quot;text/quot; + quot;javascriptquot;,
        ...
Attribut-Helper




Donnerstag, 12. März 2009
def html_attrs(lang = 'en-US')
                  {
                    :xmlns => quot;http://www.w3.org/1999/xhtmlquot;,
 ...
%html{html_attrs('de-de')}

                                 Magic!


                <html lang='de-de' xml:lang='de-de'
...
IDs und Classes




Donnerstag, 12. März 2009
#eins
                  .zwei
                  #drei.vier Hallo!

                                 Magic!

              ...
Auto-ID's und Klassen




Donnerstag, 12. März 2009
%ul
                  %li[@book, :foo]
                    Book

                                 Magic!

                ...
Ruby FTW!




Donnerstag, 12. März 2009
%p= quot;Yayquot;.downcase

                            Magic!



                <p>yay</p>

Donnerstag, 12. März 2009
%p&= quot;<b>Yay</b>quot;.downcase

                            Magic!



                <p>&lt;b&gt;yay&lt;/b&gt;</p>


...
%p== #{n} Followers

                              Magic!



                <p>120231373274987476 Followers</p>



Donner...
- [1,2,3].each do |i|
                  %p= i

                             Magic!

                  <p>1</p>
           ...
Filter




Donnerstag, 12. März 2009
:markdown
                  Header
                  ======

                     Hallo, *Welt*

                         ...
Filter
                ‣ plain
                               ‣ sass
                ‣ javascript
                        ...
Kommentare




Donnerstag, 12. März 2009
/ this is a comment
                            Magic!


                <!-- This is a comment -->



Donnerstag, 12. Mär...
/[if IE]
                  a {:href => 'http://www.getfirefox.com/' }
                    Get Firefox!


                 ...
-# this is a comment




Donnerstag, 12. März 2009
-# this is a comment
                            Magic!




Donnerstag, 12. März 2009
But wait, there's more!




Donnerstag, 12. März 2009
classes/Haml.html
                        atlin.com/docs/rdoc/
   http://haml.hamptonc
Donnerstag, 12. März 2009
SASS




Donnerstag, 12. März 2009
Syntactically Awesome
                StyleSheets



Donnerstag, 12. März 2009
Warum?




Donnerstag, 12. März 2009
Donnerstag, 12. März 2009
Keine Variablen




Donnerstag, 12. März 2009
Keine Abstraktionen




Donnerstag, 12. März 2009
Keine echten
                Kaskadierungen



Donnerstag, 12. März 2009
installation als rails-
                plugin



Donnerstag, 12. März 2009
> gem install haml
                > cd rails_app
                > haml --rails .


Donnerstag, 12. März 2009
stylesheets/sass/screen.sass
                            Magic!

               stylesheets/screen.css



Donnerstag, 12. ...
Die Basics




Donnerstag, 12. März 2009
Die Basics, Die!




Donnerstag, 12. März 2009
#main
                  :color #0f0
                  :width 300px
                  p
                    :color #030

  ...
a l te
                                              rna
                #main
                                           ...
(
                eventuell besser in situationen mit
                migrationshintergrund
                )




Donnerst...
Elternreferenz




Donnerstag, 12. März 2009
quot;Elternreferenzquot;




Donnerstag, 12. März 2009
link
                  color: #0f0
                  &:hover
                     color: #0ff


                          ...
Zusammengesetzte
                Styles



Donnerstag, 12. März 2009
.box
                  :border
                     :top 1px solid black
                     :bottom 5px solid black


  ...
Konstanten




Donnerstag, 12. März 2009
!bg_color = #002244
                body
                  :background-color = !bg_color

                               M...
ng!
                                             htu
                                        Ac
                !bg_color ...
Arithmetik




Donnerstag, 12. März 2009
!bg_color = #002244
                body
                  :background-color = !bg_color + #020202


                     ...
Mixins




Donnerstag, 12. März 2009
=standard-border
                  :border 1px solid black
                  :padding 5px

                #main
         ...
@import




Donnerstag, 12. März 2009
Output Styles




Donnerstag, 12. März 2009
.box{border-top:1px solid
                black;border-bottom:5px solid
                black}body{background-
           ...
Ausblick (HAML Edge)




Donnerstag, 12. März 2009
Mixin-Argumente




Donnerstag, 12. März 2009
=grid-unit-base(!gutter_width = 50px)




Donnerstag, 12. März 2009
Kontrollstrukturen




Donnerstag, 12. März 2009
@for !n from 1 through 15
                  .grid_#{!n}
                    +grid-width(!n, 15, 200px)




Donnerstag, 12....
!last = true
                @if !last
                  +last
                @else
                  :margin-right = 20p...
COMPASS




Donnerstag, 12. März 2009
CSS Meta Framework




Donnerstag, 12. März 2009
CSS-Frameworks
                ‣ Blueprint
                ‣ YUI-Grids
                ‣ 960.gs (als Plugin)
             ...
COMPASS-Module

                ‣ Reset
                ‣ Utilities
                ‣ Layout




Donnerstag, 12. März 2009
Installation




Donnerstag, 12. März 2009
> git clone git://github.com/nex3/haml.git
                > cd haml
                > sudo rake install

                ...
Rails-Integration




Donnerstag, 12. März 2009
> compass --rails .




Donnerstag, 12. März 2009
app/stylesheets/foo.sass

                              Magic!

                public/stylesheets/compiled/foo.css




Do...
Beispiel (Blueprint)




Donnerstag, 12. März 2009
header


                            artist_header          logo_header




                                            bo...
!!! Strict
                %html{html_attrs('de-de')}
                  %head
                    = stylesheet_link_tag 'c...
!!! Strict
                %html{html_attrs('de-de')}
                  %head
                    = stylesheet_link_tag 'c...
@import compass/reset.sass
                @import blueprint/modules/grid.sass

                #container
               ...
Flexible Grid-Definition




Donnerstag, 12. März 2009
@import compass/reset.sass
                @import blueprint/modules/grid.sass

                !blueprint_grid_columns = ...
Wegweiser -->




Donnerstag, 12. März 2009
// Clearing floats without extra markup
                // Simple Clearing of Floats
                // [...]
            ...
// Hides html text and replaces it with an image.
                // If you use this on an inline element, you will
      ...
Diskussion




Donnerstag, 12. März 2009
Meta-Framework
                sinnvoll?



Donnerstag, 12. März 2009
COMPASS =
                Work in Progress



Donnerstag, 12. März 2009
Wird debugging im
                Browser schwieriger?
                            (Ist der Output zu un-dry?)




Donners...
Nicht für jedes Umfeld
                geeignet?



Donnerstag, 12. März 2009
Upcoming SlideShare
Loading in...5
×

HAML / SASS and COMPASS

3,304

Published on

HAML / SASS and COMPASS

A presentation held at the rails usergroup hamburg meetup march 2009.

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,304
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

HAML / SASS and COMPASS

  1. 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
  2. 2. HAML Donnerstag, 12. März 2009
  3. 3. (X)HTML Abstraction Markup Language Donnerstag, 12. März 2009
  4. 4. ?! (X)HTML Abstraction Markup Language Donnerstag, 12. März 2009
  5. 5. Why oh why? Donnerstag, 12. März 2009
  6. 6. ERB = HTML = Tag-Suppe Donnerstag, 12. März 2009
  7. 7. Donnerstag, 12. März 2009
  8. 8. HTML-Tags = Redundant Donnerstag, 12. März 2009
  9. 9. <div> </div> Donnerstag, 12. März 2009
  10. 10. <div> Re d und </div>a n t ! Donnerstag, 12. März 2009
  11. 11. ERB = Zu Nachsichtig Donnerstag, 12. März 2009
  12. 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
  13. 13. Donnerstag, 12. März 2009
  14. 14. installation als rails plugin Donnerstag, 12. März 2009
  15. 15. > gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009
  16. 16. Butter bei die Fische! Donnerstag, 12. März 2009
  17. 17. Einfache Tags Donnerstag, 12. März 2009
  18. 18. %table %tr %td Hey there Donnerstag, 12. März 2009
  19. 19. %table %tr %td Hey there Magic! <table> <tr> <td>Hey there</td> </tr> </table> Donnerstag, 12. März 2009
  20. 20. Selbstschließende Tags Donnerstag, 12. März 2009
  21. 21. %foo/ Magic! <foo/> Donnerstag, 12. März 2009
  22. 22. Automatisch für: ‣ meta ‣ img ‣ link ‣ script ‣ br ‣ hr Donnerstag, 12. März 2009
  23. 23. Whitespace-Kontrolle Donnerstag, 12. März 2009
  24. 24. %blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote> Donnerstag, 12. März 2009
  25. 25. %img %img> %img Magic! <img /><img /><img /> Donnerstag, 12. März 2009
  26. 26. Tag-Attribute Donnerstag, 12. März 2009
  27. 27. %head{ :name => quot;doc_headquot; } %script{ 'type' => quot;text/quot; + quot;javascriptquot;, :src => quot;javascripts/script_#{2 + 7}quot; } Magic! <head name='doc_head'> <script src='/docs/rdoc/javascripts/script_9' type='text/javascript'> </script> </head> Donnerstag, 12. März 2009
  28. 28. Attribut-Helper Donnerstag, 12. März 2009
  29. 29. def html_attrs(lang = 'en-US') { :xmlns => quot;http://www.w3.org/1999/xhtmlquot;, 'xml:lang' => lang, :lang => lang } end Donnerstag, 12. März 2009
  30. 30. %html{html_attrs('de-de')} Magic! <html lang='de-de' xml:lang='de-de' xmlns='http://www.w3.org/1999/xhtml'> </html> Donnerstag, 12. März 2009
  31. 31. IDs und Classes Donnerstag, 12. März 2009
  32. 32. #eins .zwei #drei.vier Hallo! Magic! <div id=quot;einsquot;> <div class=quot;zweiquot;> <div id=quot;dreiquot; class=quot;vierquot;>Hallo!</div> </div> </div> Donnerstag, 12. März 2009
  33. 33. Auto-ID's und Klassen Donnerstag, 12. März 2009
  34. 34. %ul %li[@book, :foo] Book Magic! <ul> <li class=quot;foo_bookquot; id=quot;foo_book_1quot;> Book </li> </ul> Donnerstag, 12. März 2009
  35. 35. Ruby FTW! Donnerstag, 12. März 2009
  36. 36. %p= quot;Yayquot;.downcase Magic! <p>yay</p> Donnerstag, 12. März 2009
  37. 37. %p&= quot;<b>Yay</b>quot;.downcase Magic! <p>&lt;b&gt;yay&lt;/b&gt;</p> Donnerstag, 12. März 2009
  38. 38. %p== #{n} Followers Magic! <p>120231373274987476 Followers</p> Donnerstag, 12. März 2009
  39. 39. - [1,2,3].each do |i| %p= i Magic! <p>1</p> <p>2</p> <p>3</p> Donnerstag, 12. März 2009
  40. 40. Filter Donnerstag, 12. März 2009
  41. 41. :markdown Header ====== Hallo, *Welt* Magic! <h1>Header</h1> <p>Hallo, <em>Welt</em> Donnerstag, 12. März 2009
  42. 42. Filter ‣ plain ‣ sass ‣ javascript ‣ textile ‣ escaped ‣ markdown ‣ ruby ‣ maruku ‣ preserve ‣ roll yer own ‣ erb Donnerstag, 12. März 2009
  43. 43. Kommentare Donnerstag, 12. März 2009
  44. 44. / this is a comment Magic! <!-- This is a comment --> Donnerstag, 12. März 2009
  45. 45. /[if IE] a {:href => 'http://www.getfirefox.com/' } Get Firefox! Magic! <!--[if IE]> <a href=quot;http://www.getfirefox.com/quot;> Get Firefox! </a> <![endif]--> Donnerstag, 12. März 2009
  46. 46. -# this is a comment Donnerstag, 12. März 2009
  47. 47. -# this is a comment Magic! Donnerstag, 12. März 2009
  48. 48. But wait, there's more! Donnerstag, 12. März 2009
  49. 49. classes/Haml.html atlin.com/docs/rdoc/ http://haml.hamptonc Donnerstag, 12. März 2009
  50. 50. SASS Donnerstag, 12. März 2009
  51. 51. Syntactically Awesome StyleSheets Donnerstag, 12. März 2009
  52. 52. Warum? Donnerstag, 12. März 2009
  53. 53. Donnerstag, 12. März 2009
  54. 54. Keine Variablen Donnerstag, 12. März 2009
  55. 55. Keine Abstraktionen Donnerstag, 12. März 2009
  56. 56. Keine echten Kaskadierungen Donnerstag, 12. März 2009
  57. 57. installation als rails- plugin Donnerstag, 12. März 2009
  58. 58. > gem install haml > cd rails_app > haml --rails . Donnerstag, 12. März 2009
  59. 59. stylesheets/sass/screen.sass Magic! stylesheets/screen.css Donnerstag, 12. März 2009
  60. 60. Die Basics Donnerstag, 12. März 2009
  61. 61. Die Basics, Die! Donnerstag, 12. März 2009
  62. 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. 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. 64. ( eventuell besser in situationen mit migrationshintergrund ) Donnerstag, 12. März 2009
  65. 65. Elternreferenz Donnerstag, 12. März 2009
  66. 66. quot;Elternreferenzquot; Donnerstag, 12. März 2009
  67. 67. link color: #0f0 &:hover color: #0ff Magic! a{ color: #0f0; } a:hover { color: #0ff; } Donnerstag, 12. März 2009
  68. 68. Zusammengesetzte Styles Donnerstag, 12. März 2009
  69. 69. .box :border :top 1px solid black :bottom 5px solid black Magic! .box { border-top: 1px solid black; border-bottom: 5px solid black; } Donnerstag, 12. März 2009
  70. 70. Konstanten Donnerstag, 12. März 2009
  71. 71. !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009
  72. 72. ng! htu Ac !bg_color = #002244 body :background-color = !bg_color Magic! body { background-color: #002244; } Donnerstag, 12. März 2009
  73. 73. Arithmetik Donnerstag, 12. März 2009
  74. 74. !bg_color = #002244 body :background-color = !bg_color + #020202 Magic! body { background-color: #022446; } Donnerstag, 12. März 2009
  75. 75. Mixins Donnerstag, 12. März 2009
  76. 76. =standard-border :border 1px solid black :padding 5px #main +standard-border Magic! #main { border: 1px solid black; padding: 5px; } Donnerstag, 12. März 2009
  77. 77. @import Donnerstag, 12. März 2009
  78. 78. Output Styles Donnerstag, 12. März 2009
  79. 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
  80. 80. Ausblick (HAML Edge) Donnerstag, 12. März 2009
  81. 81. Mixin-Argumente Donnerstag, 12. März 2009
  82. 82. =grid-unit-base(!gutter_width = 50px) Donnerstag, 12. März 2009
  83. 83. Kontrollstrukturen Donnerstag, 12. März 2009
  84. 84. @for !n from 1 through 15 .grid_#{!n} +grid-width(!n, 15, 200px) Donnerstag, 12. März 2009
  85. 85. !last = true @if !last +last @else :margin-right = 20px Donnerstag, 12. März 2009
  86. 86. COMPASS Donnerstag, 12. März 2009
  87. 87. CSS Meta Framework Donnerstag, 12. März 2009
  88. 88. CSS-Frameworks ‣ Blueprint ‣ YUI-Grids ‣ 960.gs (als Plugin) ‣ YAML (geplant?) Donnerstag, 12. März 2009
  89. 89. COMPASS-Module ‣ Reset ‣ Utilities ‣ Layout Donnerstag, 12. März 2009
  90. 90. Installation Donnerstag, 12. März 2009
  91. 91. > 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, 12. März 2009
  92. 92. Rails-Integration Donnerstag, 12. März 2009
  93. 93. > compass --rails . Donnerstag, 12. März 2009
  94. 94. app/stylesheets/foo.sass Magic! public/stylesheets/compiled/foo.css Donnerstag, 12. März 2009
  95. 95. Beispiel (Blueprint) Donnerstag, 12. März 2009
  96. 96. header artist_header logo_header body footer Donnerstag, 12. März 2009
  97. 97. !!! 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, 12. März 2009
  98. 98. !!! 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, 12. März 2009
  99. 99. @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, 12. März 2009
  100. 100. Flexible Grid-Definition Donnerstag, 12. März 2009
  101. 101. @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(24, true) #artist_header +column(6) #logo_header +column(18, true) #body +column(24, true) #footer +column(24, true) Donnerstag, 12. März 2009
  102. 102. Wegweiser --> Donnerstag, 12. März 2009
  103. 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. 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
  105. 105. Diskussion Donnerstag, 12. März 2009
  106. 106. Meta-Framework sinnvoll? Donnerstag, 12. März 2009
  107. 107. COMPASS = Work in Progress Donnerstag, 12. März 2009
  108. 108. Wird debugging im Browser schwieriger? (Ist der Output zu un-dry?) Donnerstag, 12. März 2009
  109. 109. Nicht für jedes Umfeld geeignet? Donnerstag, 12. März 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×