Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT...
!!! XML
!!! 1.1
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
  %head
    %title&= @title
  %body
    - if @content_for_...
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT...
<h1>Hello, World!</h1>   %h1 Hello, World!
<p>
                        %p
  Hello,
                          Hello,
  World!
                          World!
</p>
<u...
<a href=”…”>Haml</a>   %a{:href => ’…’} Haml

                       %div{:class=>‘block’} …
<div class=”block”>
  …      ...
<%= link_to … %>      = link_to …

<p>
  <%=h user.name %>   %p&= user.name
</p>

<li title=”<%=
user.name %>”>        %li...
<% users.each do |u| %>
                        - users.each do |u|
<li><%=h u.name %></li>
                          %li&...
- %w(foo bar).each do |s|
  = s
- end

Syntax error on line 3: You don't
need to use "- end" in Haml. Use
indentation inst...
<%= %w(foo bar).map do |s| %>
  <% s.upcase %>
<% end.join(‘<br/>’) %>



= %w(foo bar).map do |s|
  - s.upcase
- end.join...
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0   !!!
Transitional//EN" …>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML       !!!...
!!! XML
!!! 1.1
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
  %head
    %title&= @title
  %body
    - if @content_for_...
.content {
                       .content
  margin: 1em;
                         margin: 1em
}
.content h1 {
           ...
!base_color = red
!base_margin = 3em

h3
  color: white
  background-color = !base_color
  margin-left = !base_margin
!base_color = red
!base_margin = 3em

h4
  color = !base_color - #666
  background-color: white
  margin-left = !base_marg...
=round-border
  border-radius: 16px
  -webkit-border-radius: 16px
  -moz-border-radius: 16px

.navigation a
  +round-borde...
=clearfix
  display: inline-block
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibili...
=sexy-border(!color, !width = 1in)
  border:
    color = !color
    width = !width
    style: dashed

p
    +sexy-border("...
$ gem install haml
$ haml --rails path/to/rails_app




$ vim app/views/hello/index.html.haml
$ vim public/stylesheets/sass/style.sass
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Nächste SlideShare
Wird geladen in …5
×

Haml and Sass: Solution for you who get tired of ugly markup

5.494 Aufrufe

Veröffentlicht am

in RubyKaigi2009

Veröffentlicht in: Technologie, Business
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/Wm3lh ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/Wm3lh ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Haml and Sass: Solution for you who get tired of ugly markup

  1. 1. <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'>   <head>     <title><%=h @title %></title>   </head>   <body>     <% if @content_for_nav %>       <div class='navigation'>         <%= yield :nav %>       </div>     <% end %>     <div class='content'>       <%= yield %>     </div>   </body> </html>
  2. 2. !!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'}   %head     %title&= @title   %body     - if @content_for_nav       .navigation         = yield :nav     .content       = yield
  3. 3. <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'>   <head>     <title><%=h @title %></title>   </head>   <body>     <% if @content_for_nav %>       <div class='navigation'>         <%= yield :nav %> !!! XML       </div> !!! 1.1     <% end %> %html{:xmlns => 'http://www.w3.org/1999/xhtml'}     <div class='content'>   %head       <%= yield %>     %title&= @title     </div>   %body   </body>     - if @content_for_nav </html>       .navigation         = yield :nav     .content       = yield 432 characters 192 characters
  4. 4. <h1>Hello, World!</h1> %h1 Hello, World!
  5. 5. <p> %p Hello, Hello, World! World! </p> <ul> <li>alpha %ul <ul> %li <li>bravo</li> alpha </ul> %ul </li> %li bravo <li>charly</li> %li charly </ul>
  6. 6. <a href=”…”>Haml</a> %a{:href => ’…’} Haml %div{:class=>‘block’} … <div class=”block”> … %div.block … </div> .block … <div id=”header”> … #header … </div>
  7. 7. <%= link_to … %> = link_to … <p> <%=h user.name %> %p&= user.name </p> <li title=”<%= user.name %>”> %li{:title=>user.name} … … </li>
  8. 8. <% users.each do |u| %> - users.each do |u| <li><%=h u.name %></li> %li&= u.name <% end %> <% if @user.admin? %> - if @user.admin? <%= admin_menu %> = admin_menu <% else %> - else <%= common_menu %> = common_menu <% end %>
  9. 9. - %w(foo bar).each do |s| = s - end Syntax error on line 3: You don't need to use "- end" in Haml. Use indentation instead: - if foo? %strong Foo! - else Not foo.
  10. 10. <%= %w(foo bar).map do |s| %> <% s.upcase %> <% end.join(‘<br/>’) %> = %w(foo bar).map do |s| - s.upcase - end.join(‘<br/>’)
  11. 11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 !!! Transitional//EN" …> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML !!! 1.1 1.1//EN" …> <?xml version='1.0' !!! XML encoding='utf-8' ?>
  12. 12. !!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'}   %head     %title&= @title   %body     - if @content_for_nav       .navigation         = yield :nav     .content       = yield
  13. 13. .content { .content margin: 1em; margin: 1em } .content h1 { h1 font-size: 3em; font-size: 1em } .content h1 strong { strong color: red; color: red }
  14. 14. !base_color = red !base_margin = 3em h3 color: white background-color = !base_color margin-left = !base_margin
  15. 15. !base_color = red !base_margin = 3em h4 color = !base_color - #666 background-color: white margin-left = !base_margin + 1em
  16. 16. =round-border border-radius: 16px -webkit-border-radius: 16px -moz-border-radius: 16px .navigation a +round-border .navigation a { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; }
  17. 17. =clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px ul.menu +clearfix li float: left
  18. 18. =sexy-border(!color, !width = 1in) border: color = !color width = !width style: dashed p +sexy-border("blue") p { border-color: #0000ff; border-width: 1in; border-style: dashed; }
  19. 19. $ gem install haml
  20. 20. $ haml --rails path/to/rails_app $ vim app/views/hello/index.html.haml $ vim public/stylesheets/sass/style.sass

×