HAML und SASS. (und COMPASS) markup haiku vs. syntactically awesome stylesheets. Tobias Adam, Jan Krutisch mindmatters GmbH & Co.

Size: px

Start display at page:

Download "HAML und SASS. (und COMPASS) markup haiku vs. syntactically awesome stylesheets. Tobias Adam, Jan Krutisch mindmatters GmbH & Co."

Alexina Griffin
8 years ago
Views:

1 Mit hotfixes von Carsten Bormann , HAML und SASS (und COMPASS) markup haiku vs. syntactically awesome stylesheets Tobias Adam, Jan Krutisch mindmatters GmbH & Co. KG

2 HAML

3 (X)HTML Abstraction Markup Language

4 ERB = HTML = Tag-Suppe

6 HTML-Tags = Redundant

7 <div> </div>

8 <div> Redundant! </div>

9 ERB = Zu Nachsichtig

10 index.erb <%= render :partial => 'head' %>... <%= render :partial => 'foot' %> _head.erb <body> _foot.erb </body>

12 installation als rails plugin

13 > gem install haml > cd rails_app > haml --rails. > echo "gem haml" >>Gemfile > html2haml ex foo.html.erb foo.html.haml

14 Einfache Tags

15 %table %tr %td Hey there

16 %table %tr %td Hey there Magic! <table> <tr> <td>hey there</td> </tr> </table>

17 Selbstschließende Tags

18 %foo/ Magic! <foo/>

19 Automatisch für:! meta! img! link! script! br! hr

20 Whitespace-Kontrolle

21 %blockquote< %div Foo! Magic! <blockquote><div> Foo! </div></blockquote>

22 %img %img> %img Magic! <img /><img /><img />

23 Tag-Attribute

24 %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>

25 Attribut-Helper

26 def html_attrs(lang = 'en-us') { :xmlns => " 'xml:lang' => lang, :lang => lang } end

27 %html{html_attrs('de-de')} Magic! <html lang='de-de' xml:lang='de-de' xmlns=' </html>

28 IDs und Classes

29 #eins.zwei #drei.vier Hallo! Magic! <div id="eins"> <div class="zwei"> <div id="drei" class="vier">hallo!</div> </div> </div>

30 Auto-ID's und Klassen

31 %ul :foo] Book Magic! <ul> <li class="foo_book" id="foo_book_1"> Book </li> </ul>

32 Ruby FTW!

33 %p= "Yay".downcase Magic! <p>yay</p>

34 %p&= "<b>yay</b>".downcase Magic! <p><b>yay</b></p>

35 %p== #{n} Followers Magic! <p> Followers</p>

36 - [1,2,3].each do i %p= i Magic! <p>1</p> <p>2</p> <p>3</p>

37 Filter

38 :markdown Header ====== Hallo, *Welt* Magic! <h1>header</h1> <p>hallo, <em>welt</em>

39 Filter! plain! javascript! escaped! ruby! preserve! erb! sass! textile! markdown! maruku! roll yer own

40 Kommentare

41 / this is a comment Magic!

42 /[if IE] a {:href => ' } Get Firefox! Magic!

43 -# this is a comment

44 -# this is a comment Magic!

45 HAML und Rails Im Gemfile: gem haml-rails (automatically enables haml generators)

46 HAML vs. SLIM Rails node.js HAML JADE SLIM

47 But wait, there's more!

48 haml-lang.org

49 SASS

50 Syntactically Awesome StyleSheets

51 Warum?

53 Keine Variablen

54 Keine Abstraktionen

55 Keine echten Kaskadierungen

56 stylesheets/sass/screen.sass Magic! stylesheets/screen.css

57 Die Basics

58 #main :color #0f0 :width 300px p :color #030 Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; }

59 #main color: #0f0 width: 300px p color: #030 alternative syntax Magic! #main { color: #0f0; width: 300px; } #main p { color: #030; }

60 Elternreferenz

61 link a color: #0f0 &:hover color: #0ff Magic! a { color: #0f0; } a:hover { color: #0ff; }

62 Zusammengesetzte Styles

63 .box :border :top 1px solid black :bottom 5px solid black Magic!.box { border-top: 1px solid black; border-bottom: 5px solid black; }

64 Konstanten

65 Update needed!bg_color = # body :background-color =!bg_color Magic! body { background-color: #002244; }

66 Achtung!!bg_color = # body :background-color =!bg_color Magic! body { background-color: #002244; }

67 Arithmetik

68 !bg_color = # body :background-color =!bg_color + # Magic! body { background-color: #022446; }

69 Mixins

70 =standard-border :border 1px solid black :padding 5px #main +standard-border Magic! #main { border: 1px solid black; padding: 5px; }

71 Output Styles

72 .box{border-top:1px solid black;border-bottom:5px solid black}body{backgroundcolor:#002244}#main{color:lime;pbackground-color:lime;pcolor:#000000}#main{border:1px solid black;padding:5px} :compressed

73 Update needed Ausblick (HAML Edge)

74 Mixin-Argumente

75 =grid-unit-base(!gutter_width = 50px)

76 Kontrollstrukturen

77 @for!n from 1 through 15.grid_#{!n} +grid-width(!n, 15, 200px)

78 !last = :margin-right = 20px

79 COMPASS

80 CSS Meta Framework

81 CSS-Frameworks! Blueprint! YUI-Grids! 960.gs (als Plugin)! YAML (geplant?)

82 COMPASS-Module! Reset! Utilities! Layout

83 SASS vs. LESS LESS ist aus der node.js-gemeinde Twitter Bootstrap basiert auf LESS gem boostrap-sass Jetzt auch im Rails Tutorial :-) (evtl. Kapitel 5 nochmal lesen)

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created